css如何实现普通背景模糊效果

详情介绍

普通背景模糊

为了美观不能使背景前的文字模糊，而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. }

声明：
根据2013年1月30日《计算机软件保护条例》2次修订第１７条规定： 为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存 储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬! 鉴于此，也希望大家按此说明研究软件!
1、本站所有资源来源于用户上传和网络，因此不包含技术服务请大家谅解！
2、下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担
3、站内资源均来源于网络公开发表文件或网友投稿发布，如侵犯您的权益，请联系管理员删除。
4、本站不保证所提供下载的资源的准确性、安全性和完整性，资源仅供下载学习之用！如有链接无法下载、失效或广告，请联系客服处理！
5、所有资源均收集于互联网仅供学习、参考和研究，请理解这个概念，所以不能保证每个细节都符合你的需求，也可能存在未知的BUG与瑕疵，因本站资源均为可复制品,所以不支持任何理由的退款兑现，请熟知后再支付下载！。