今天小编跟大家讲解下有关Css3实现背景毛玻璃效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关Css3实现背景毛玻璃效果 的相关资料，希望小伙伴们看了有所帮助。
ios里毛玻璃效果的使用非常多 本文介绍一个实现div毛玻璃背景的方法
css3 Filtercss3的Filter主要用在图像的特效处理上 默认值为none 还有以下备选项：
1.grayscale灰度2.sepia褐色3.saturate饱和度4.hue-rotate色相旋转5.invert反色6.opacity透明度7.brightness亮度8.contrast对比度9.blur模糊10.drop-shadow阴影每一种效果大家可以自己试试 考虑一下可以用在哪些方面 这里仅仅用到了其中的blur 帮助实现高斯模糊的效果。兼容性我试了一下最新的火狐和Chrome效果都是可以的 IE不用说了…
filter:blur()参数默认是0 单位px 不接受% 参数值的大小表示屏幕上以多少像素融在一起 所以值越大越模糊。
：before():before是css中的一种伪元素 可用于在某个元素之前插入某些内容。用它来添加模糊背景 具体用法可以看我另外一篇?:before和:after
rgba()毛玻璃背景上文字内容显示效果并不理想 无论字体颜色深或浅 看着总是怪怪的…因此还需要加上一层带色的半透明背景 一般是黑色 或白色。
示例：整体通过三层重叠实现：最下面是模糊层.blur_box:before 设置z-index: -2。中间是rgba层.rgba 设置z-index: -1。最上面是内容层.blur_box 设置z-index: 0。
代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>毛玻璃效果</title></head><style>*{ margin: 0; padding: 0;}.bg{ background:url(1.jpg) no-repeat center center fixed;/* 与下面的blur_box:before中的background设置一样 */ width:100%; height:100%;}.blur_box{ z-index: 0;/* 为不影响内容显示必须为最高层 */ position: relative; overflow: hidden;}.blur_box:before{ content: "";/* 必须包括 */ position: absolute;/* 固定模糊层位置 */ width:300%; height:300%; left: -100%;/* 回调模糊层位置 */ top: -100%;/* 回调模糊层位置 */ background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */ filter: blur(20px);/* 值越大越模糊 */ z-index: -2;/* 模糊层在最下面 */}.rgba{ background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示 将背景颜色加深 */ position: absolute;/* 固定半透明色层位置 */ width:100%; height:100%; z-index: -1;/* 中间是rgba半透明色层 */}.content_text{ text-align: center; color: rgba(255, 255, 255, 0.8); padding: 50px 30px; line-height: 28px;}article{ width:40%; height:300px; margin:120px auto;}</style><body <div class="bg"> <article class="blur_box"> <div class="rgba"></div><!-- 写在这其实和blur_box:before效果相同 但已经设置过blur_box:before了 --> <div class="content_text"> <h1>haha</h1> <p>texttexttexttexttexttexttexttexttext</p> <p>texttexttexttexttexttexttexttexttext</p> <p>texttexttexttexttexttexttexttexttext</p> <p>texttexttexttexttexttexttexttexttext</p> <p>texttexttexttexttexttexttexttexttext</p> <p>texttexttexttexttexttexttexttexttext</p> </div> </article> </div></body></html>注释已经写的很详细了 但有一点还是得单独说一下。因为blur()产生的模糊效果当值越大时 就会有越宽的边缘渐变过渡 为了消除(实际上只是让它看不见) 我将模糊层的宽度和高度都变大 再通过top和left负值调整位置。
.blur_box:before{ content: ""; position: absolute; width:300%;/* 模糊层的宽度和高度都变大 */ height:300%; left: -100%;/* 回调模糊层位置 */ top: -100%; background:url(1.jpg) no-repeat center center fixed; filter: blur(20px); z-index: -2;}其中.rgba也可改为白色半透明background-color: rgba(255,255,255,0.2); 完全取决于自己 然后相应改变内容的字色。blur()的参数也可以根据自己爱好试着改变出想要的效果。
来源：爱蒂网