css3怎么实现普通背景模糊效果

详情介绍

普通背景模糊

为了美观不能使背景前的文字模糊，而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢？我们可以使用伪元素，这样我们也顺便解决了白边的问题。

实现思路：

在父容器中设置背景，并且使用相对定位，方便伪元素重叠。而在:after中只需要继承背景，并且设置模糊，绝对定位覆盖父元素即可。这样父容器中的子元素便可不受模糊度影响。因为伪元素的模糊度不能被父元素的子代继承。

html布局

1. <div class=“bg”>
2.    <div class=“drag”>www.98sucai.com</div>
3. </div>

css代码：

1. /*背景模糊*/
2. .bg{
3.     width:100%;
4.     height:100%;
5.     position: relative;
6.     background: url(“../image/banner/banner.jpg”) no–repeat fixed;
7.     padding:1px;
8.     box–sizing:border–box;
9.     z–index:1;
10. }
11. .bg:after{
12.     content: “”;
13.     width:100%;
14.     height:100%;
15.     position: absolute;
16.     left:0;
17.     top:0;
18.     background: inherit;
19.     filter: blur(2px);
20.     z–index: 2;
21. }
22. .drag{
23.     position: absolute;
24.     left:50%;
25.     top:50%;
26.     transform: translate(-50%,-50%);
27.     width:200px;
28.     height:200px;
29.     text–align: center;
30.     z–index:11;
31. }