css怎么做背景图虚化

在网页设计中，使用背景图可以很好的装饰页面，使其更具有视觉冲击力，但是有时候我们需要使用背景图虚化来达到更好的效果，那么CSS怎样实现背景图虚化呢？下面就让我们一起来学习一下。

/* 使用CSS3的filter属性来实现背景图虚化 */.blur {
      	background: url("bg.jpg") no-repeat center center fixed;
      	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      	width: 100%;
      	height: 100%;
      	filter: blur(5px);
        -webkit-filter: blur(5px);
}
    

上述代码中，我们使用了CSS3的filter属性，其中blur可以实现背景图虚化效果。这里我们设置虚化的程度为5px。如果要达到更加明显的效果，可以适当增加虚化程度。

此外，我们还需要设置背景图的css属性。在本例中，我们使用了背景图片”bg.jpg”，并设置了其在页面中水平垂直居中，大小为cover，即拉伸铺满整个页面。若使用其他背景图，请注意修改相应的属性值。

最后，在HTML的body标签中添加CSS类名”blur”，即可实现背景图的虚化效果：

body class="blur">
    	……/body>
    

通过上述方式，我们就可以实现简单的背景图虚化效果了。这样，我们就可以更好的将精力放在页面其他元素的设计上，达到更好的视觉效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！