CSS3：毛玻璃效果
2019-08-07 本文已影响133人
LXEP
通常我们喜欢使用半透明颜色作为背景。如果将其叠放到照片背层上，就会增加视觉上的冲击力，不过这样会导致文字阅读困难。
比如，下面这个效果：
html文件：
<main>
<blockquote>
"少年贪玩，青年迷恋爱情，壮年汲汲于成名成家，暮年自安于自欺欺人。人寿几何，顽铁能炼成的精金，能有多少？但不同程度的锻炼，必有不同程度的成绩；不同程度的纵欲放肆，必积下不同程度的顽劣。
<br />
<br />
"上苍不会让所有幸福集中到某个人身上，得到爱情未必拥有金钱；拥有金钱未必得到快乐；得到快乐未必拥有健康；拥有健康未必一切都会如愿以偿。保持知足常乐的心态才是淬炼心智、净化心灵的最佳途径。一切快乐的享受都属于精神，这种快乐把忍受变为享受，是精神对于物质的胜利，这便是人生哲学。"
<footer>——
<cite>杨绛</cite>
</footer>
</blockquote>
</main>
css文件：
body{
background: url("imgs/animals.jpg") 0 / cover fixed;
}
main{
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 800px;
height: 500px;
line-height: 2;
margin: auto;
border-radius: 5px;
background: rgba(255, 255, 255, .3);
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
}
输出的效果：
透明背景效果
我们可以看到文字的阅读显然变得很困难，如果想要改善，可以提高背景色的不透明度，如下：
不透明度改为70%
文字的阅读性提高了，但是失去了想要达到的设计美感。如果我们想要二者兼得，可以借助滤镜达到这样的效果。
由于我们不能直接对元素本身进行模糊处理，所以就先给该元素添加一个伪元素，然后将其定位在元素的下层，它的背景将无缝匹配到<body>元素的背景。
完整代码如下：
css文件
body, main::before{
background: url("imgs/animals.jpg") 0 / cover fixed;
}
main{
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 800px;
height: 500px;
line-height: 2;
margin: auto;
border-radius: 5px;
background: rgba(255, 255, 255, .3);
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
overflow: hidden;
}
main::before{
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
filter: blur(20px);
z-index: -1;
margin: -30px;
}
效果如图：
毛玻璃效果
