知识储备
1.filter:blur() CSS3模糊滤镜
这个效果很有趣哦。先来看看效果图吧
毛玻璃效果
效果实现
我们先来看看html结构吧，本书作者采用了blockquote结构来展示，因为对其不是特别熟悉，于是用p标签来代替
示例代码：
html
<div class="mytest">
<p>"The only way to get rid of a temptation is yield to it.Resist it,and your soul grows sick with longing for the things it has forbidden to itself."
<br/>Oscar Wilde,The Picture of Dorian Gray
</p>
</div>
css
因为是背景图片（无法撑开容器），必须设置其容器大小
.test{
position: relative;
width: 400px;
height: 250px;
margin: 0 auto;
background: url("锥头螳螂.jpg") center;
background-size: cover;
}
设置文字p容器（这里我称呼它为玻璃） 垂直/水平 居中
.test p{
width: 330px;
padding: 15px;
//设置文字左右/垂直居中
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%,-50%);
margin: 0; //取消p标签的margin
background: hsla(0,100%,50%,.6); //设置其背景色
color: white;
border-radius: 3px;
overflow: hidden; //下面具体分析其作用
}
设置伪元素来模拟毛玻璃的效果
.test p::before{
position: absolute;
left: 0; top: 0; bottom: 0; right: 0;
content: '';
background: url("锥头螳螂.jpg");
background-size: cover;
margin: -20px; //！！这个后面会说明
z-index: -1; //！！这个后面会重点说明
-webkit-filter: blur(20px);
filter: blur(20px);}
于是乎，看完一大堆代码还是很难受的。我们整理一下思路
1.我们设置了父容器来显示图片
2.我们设置了p标签，并将玻璃先生（p标签）水平/垂直居中，并给玻璃先生一点半透明的背景色
效果：
半透明背景
3.上面的效果还不是我们想要的，上面的半透明色影响到了我们去阅读文字
于是我们设置了一个伪元素来制造一点毛的效果
我们先来加个滤镜,并设置和div容器一样的背景图片
background: url("锥头螳螂.jpg") no-repeat center;
-webkit-filter: blur(5px);
filter: blur(5px);
其次设置z-index=-1，防止覆盖文字
但是，还有一点瑕疵---模糊程度越到边缘越不明显
观察看到，模糊程度越到边缘越不明显
于是作者非常巧妙地利用
margin: -20px;
来扩大模糊半径，同时做到和背景图片的重合
这里很重要，所以请注意看！！！！
我们先来解释模糊半径
扩大的模糊半径（超出了父容器）
于是在玻璃先生（p标签）的样式里设置
overflow:hidden
再看看效果
理想的模糊效果
那么我们来说第二点，这里需要一点点计算，也是这个效果的约束之一
我们去掉滤镜，来看看伪元素背景图和div容器背景图是否重合
明显不重合的背景
虽然模糊后，我们不易察觉，但有时我们需要一个微弱的模糊滤镜的时候很容易被察觉，来查查原因！
思考一番，发现伪元素和div背景大小不一致，背景图缩放不同，产生了错位。了解原因后，我们总结一下：
1.我们需要让div容器和伪元素宽度一致
2.我们不希望div容器因为高让图片产生横向的缩放
计算一下：伪元素宽度330px+2x内距15px+2x伪元素外距20px = 400px,正好是div容器宽度，我们的错位也消失了。（这里margin起到了调节的效果）
4.我们加回滤镜，效果已经很逼真了，但是貌似我们的毛玻璃和背景色融在了一起，所以我们在玻璃先生（p标签）中加了背景色（这里的颜色需要与背景色有较大的色差才明显）
background: hsla(274, 100%, 90%, 0.2);
并在我们的伪元素中加入上一节学到的滤镜
mix-blend-mode: luminosity;
大功告成，我们实现了效果
可以尝试一下不同的滤镜效果哦
网友评论