毛玻璃效果就是底层模糊，面层清晰的那种
毛玻璃效果
这是html源文件 < !DOCTYPE html>
先搞一个div作为容器层，用来放置风景背景图。
内部放一个div，作为毛玻璃的主体。
再放一个img，显示天气图标。
其实就是三层镶嵌。
容器层 .container{ width: 287px; //设置好容器层的大小，宽和高，这样就先固定了这个容器层， height: 285px; background-image: url(background.png); //填充一个背景图，这个背景图的大小要跟容器的宽高是一样的，因为设置了no-repeat，所以如果太小就会出现填充不满 //当然可以设置background-size:100% 100%之类 background-repeat: no-repeat; background-attachment: fixed; //设置这个的原因主要是为了将背景图固定好，这个固定是相对浏览器而言，所以直接的效果就是相对于用户来说，滚动浏览器也能看到背景图 //但这个并不作为毛玻璃效果显示的技术点。 overflow: hidden; } background-attachment: fixed; 当页面的其余部分滚动时，背景图像不会移动。
background-repeat: no-repeat; 把背景图设置为不重复
overflow: hidden; 超出部分不显示
毛玻璃层 .frosted-glass{ width: 287px; //这里的高度和宽度跟背景容器一样，也是为了实现更好的显示效果 height: 285px; background: inherit; //主要是为了能够跟父元素背景更加融合在一起，实现姣好的全景毛玻璃效果 -webkit-filter: blur(5px); //其他都是兼容参数 -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); //主要是这个 filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false); //兼容ie } background: inherit; 继承父元素的背景
毛玻璃的关键点在于 filter:blur ，filter是滤镜的意思，滤镜有很多种，能够像给照片加滤镜效果一样直接加。 ```Alpha：设置透明层次blur：创建高速度移动效果，即模糊效果Chroma：制作专用颜色透明DropShadow：创建对象的固定影子FlipH：创建水平镜像图片FlipV：创建垂直镜像图片glow：加光辉在附近对象的边外gray：把图片灰度化invert：反色light：创建光源在对象上mask：创建透明掩膜在对象上shadow：创建偏移固定影子wave：波纹效果Xray：使对象变得像被x光照射一样```
图标层
把背景模糊了，是为了凸显出某些东西，这个图标层就是泛指这些要凸显的东西 .weather{ width:80px; height:80px; margin-top: -200px; margin-left: 100px; position: relative; //这里用相对布局，通过margin来调整位置，这样主要是为了更方便的跟随容器层一起移动或者显示。 //并且图标的position设成relative，是为了让它浮在最上面，因为relative的要比默认static的显示层级高。 display: block; }
参考： /css/41.html
本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源：php中文网
