4-3 视觉效果 毛玻璃效果

知识储备

1.filter:blur() CSS3模糊滤镜

---

这个效果很有趣哦。先来看看效果图吧

毛玻璃效果

效果实现

我们先来看看html结构吧，本书作者采用了blockquote结构来展示，因为对其不是特别熟悉，于是用p标签来代替

示例代码：
html

   
  
"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."        
     
Oscar Wilde,The Picture of Dorian Gray    
  

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;

大功告成，我们实现了效果

可以尝试一下不同的滤镜效果哦