前面的话
本文将详细介绍CSS遮罩效果和毛玻璃效果
遮罩效果
普通遮罩
一般地，处理全屏遮罩的方法是使用额外标签
<style>
.overlay{ ?position:fixed; ?top: 0;right: 0;left: 0;bottom: 0; ?background:rgba(0,0,0,0.8);}.lightbox{ ?position:absolute; ?top: 0;right: 0;left: 0;bottom: 0; ?margin:auto; ?z-index:1; ?width: 100px; ?height: 100px; ?background-color: white;}</style><div class="overlay"></div><div class="lightbox"></div>
效果如下
阴影遮罩
对于简单的应用场景和产品原型来说，我们可以利用box-shadow来达到调暗背景的效果
box-shadow: 0 0 0 999px rgba(0,0,0,0.8);
这个初步的解决方案有一个明显的问题，就是它无法在较大的屏幕分辨率(如>2000px)下正常工作。要么加大数字来缓解这个问题，要么换用视口单位来一劳永逸地解决它，只有这样才能确保"遮罩层"总是可以覆盖(至超出)视口
box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8);
这个技巧非常简洁易用，但它存在两个非常严重的问题，从而制约了其使用场景
1、由于遮罩层的尺寸是与视口相关，而不是与页面相关的，滚动页面时，遮罩层的边缘就露出来了，除非给它加上position：fixed这个样式，或者页面并没有长到需要滚动的程度
2、这种效果无法防止用户的鼠标与页面的其他部分发生交互
<style>.lightbox{ ?position:absolute; ?top: 0;right: 0;left: 0;bottom: 0; ?margin:auto; ?z-index:1; ?width: 100px; ?height: 100px; ?background-color: white; ?box-shadow: 0 0 0 50vmax rgba(0,0,0,0.8);}</style><div class="lightbox"></div>
模糊遮罩
把关键元素之外的一切都模糊掉，用来配合(或取代)阴影效果，这个效果的真实感更强，因为它营造出了"景深效果。视线聚焦在距离较近的物体上时，远处的背景就是虚化的
filter:blur(5px);
下面是一个实例，鼠标移出弹出框时， 模糊消失
毛玻璃效果
下面来逐步实现毛玻璃效果
半透明颜色
半透明颜色最初的使用场景之一就是作为背景。将其叠放在照片类或其他花哨的背层之上，可以减少对比度，确保文本的可读性
下面是一个实例
<style>.outer{ ?position:relative; ?height: 200px; ?width: 200px; ??background: hsl(20,40%,90%); ?background-image:linear-gradient(90deg,#fb3 11px,transparent 0), ?linear-gradient(90deg,#ab4 23px,transparent 0), ?linear-gradient(90deg,#655 41px,transparent 0); ?background-size: 41px 100%,61px 100%,83px 100%;}.inner{ ?position:absolute; ?top: 0;right: 0;left: 0;bottom: 0; ?font: bold 20px/1.5 ‘宋体‘; ?height: 160px; ?width: 180px; ?margin:auto; ?background:hsla(0,0%,100%,.3);}</style><div class="outer"> ?<div class="inner">前端入门容易精通难，说的是前端，更指javascript</div></div>【增大不透明度】
设置为30%的不透明度，文字难以看清。当然，可以通过提升不透明度来增加文本可读性，但效果整个效果就没有那么生动了
background:hsla(0,0%,100%,.6);
模糊处理
在传统的平面设计中，通常把文本层所覆盖的那部分图片区域作模糊处理。模糊的背景看起来不那么花哨，因此在它之上的文本就相对比较易读了。过去，由于模糊运算的性能消耗极其巨大，以致于这个技巧在网页设计中鲜有用武之地。不过，随着GPU的不断进化以及硬件加速的不断普及，眼下这个技巧已经逐渐流行起来
【父元素模糊】
如果直接对父元素设置模糊，则文本本身也会被模糊处理
<style>.outer{ ?position:relative; ?height: 200px; ?width: 200px; ??background: hsl(20,40%,90%); ?background-image:linear-gradient(90deg,#fb3 11px,transparent 0), ?linear-gradient(90deg,#ab4 23px,transparent 0), ?linear-gradient(90deg,#655 41px,transparent 0); ?background-size: 41px 100%,61px 100%,83px 100%; ?filter:blur(5px);}.inner{ ?position:absolute; ?top: 0;right: 0;left: 0;bottom: 0; ?font: ?20px/1.5 ‘宋体‘; ?height: 160px; ?width: 180px; ?margin:auto; ?background:hsla(0,0%,100%,.6);}</style><div class="outer"> ?<div class="inner">前端入门容易精通难，说的是前端，更指javascript</div></div>【伪元素模糊】
因此，对一个伪元素进行处理，然后将其定位到元素的下层
<style>.outer{ ?position:relative; ?height: 200px; ?width: 200px; ?z-index:1; ?background: hsl(20,40%,90%); ?background-image:linear-gradient(90deg,#fb3 11px,transparent 0), ?linear-gradient(90deg,#ab4 23px,transparent 0), ?linear-gradient(90deg,#655 41px,transparent 0); ?background-size: 41px 100%,61px 100%,83px 100%; ??}.inner:before{ ?content:‘‘; ?position:absolute; ?top: 0;right: 0;left: 0;bottom: 0; ?filter:blur(5px); ?background: rgba(255,0,0,0.5); ?z-index:-1;}.inner{ ?position:absolute; ?top: 0;right: 0;left: 0;bottom: 0; ?font: ?20px/1.5 ‘宋体‘; ?height: 160px; ?width: 180px; ?margin:auto; ?background:hsla(0,0%,100%,.3);}</style><div class="outer"> ?<div class="inner">前端入门容易精通难，说的是前端，更指javascript</div></div>背景复制
下面复制父级元素的背景来替换半透明的红色。如果保证毛玻璃下的背景正好与父元素背景的图案相吻合呢？使用fixed即可，将父元素和伪元素的背景设置为相同，且都相对于视口设置，可实现目标
<style>.outer{ ?position:relative; ?height: 200px; ?width: 200px; ?z-index:1; ?background: hsl(20,40%,90%) fixed; ?background-image:linear-gradient(90deg,#fb3 11px,transparent 0), ?linear-gradient(90deg,#ab4 23px,transparent 0), ?linear-gradient(90deg,#655 41px,transparent 0); ?background-size: 41px 100%,61px 100%,83px 100%; ??}.inner:before{ ?content:‘‘; ?position:absolute; ?top: 0;right: 0;left: 0;bottom: 0; ?filter:blur(5px); ?background: hsl(20,40%,90%) fixed; ?background-image:linear-gradient(90deg,#fb3 11px,transparent 0), ?linear-gradient(90deg,#ab4 23px,transparent 0), ?linear-gradient(90deg,#655 41px,transparent 0); ?background-size: 41px 100%,61px 100%,83px 100%; ?z-index:-1;}.inner{ ?position:absolute; ?top: 0;right: 0;left: 0;bottom: 0; ?font: ?20px/1.5 ‘宋体‘; ?height: 160px; ?width: 180px; ?margin:auto; ?background:hsla(0,0%,100%,.3);}</style><div class="outer"> ?<div class="inner">前端入门容易精通难，说的是前端，更指javascript</div></div>效果如下
CSS遮罩效果和毛玻璃效果
原文地址：http://www.cnblogs.com/xiaohuochai/p/7511823.html