CSS遮罩效果和毛玻璃效果

CSS遮罩效果和⽑玻璃效果
前⾯的话
本⽂将详细介绍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>
前端⼊门容易精通
难，说的是前端，更
指javascript
【增⼤不透明度】
设置为30%的不透明度，⽂字难以看清。

当然，可以通过提升不透明度来增加⽂本可读性，但效果整个效果就没有那么⽣动了background:hsla(0,0%,100%,.6);
前端⼊门容易精通
难，说的是前端，更
指javascript
模糊处理
在传统的平⾯设计中，通常把⽂本层所覆盖的那部分图⽚区域作模糊处理。

模糊的背景看起来不那么花哨，因此在它之上的⽂本就相对⽐较易读了。

过去，由于模糊运算的性能消耗极其巨⼤，以致于这个技巧在⽹页设计中鲜有⽤武之地。

不过，随着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>
前端⼊门容易精通
难，说的是前端，更
指javascript
【伪元素模糊】
因此，对⼀个伪元素进⾏处理，然后将其定位到元素的下层
<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>
前端⼊门容易精通
难，说的是前端，更
指javascript
背景复制
下⾯复制⽗级元素的背景来替换半透明的红⾊。

如果保证⽑玻璃下的背景正好与⽗元素背景的图案相吻合呢？使⽤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;
}
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>
效果如下
前端⼊门容易精通
难，说的是前端，更
指javascript
样式封装
⽑玻璃样式封装如下
.frostedglass{
width: 100px;
height: 100px;
font-size:16px;
/*计算值为 height - width*top*2*/
line-height: 70px;
z-index:1;
border-radius:50%;
position:relative;
overflow: hidden;
text-align:center;
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%;
}
.frostedglass-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;
}
.frostedglass-inner{
position:absolute;
top: 15%;right: 15%;left: 15%;bottom: 15%;
background:hsla(0,0%,100%,.3);
}
下⾯是⼀个例⼦
<div class="frostedglass">
<div class="frostedglass-inner">前端开发</div>
<div class="frostedglass">
<div class="frostedglass-inner">HTML</div> </div>
前端开发HTML。