4-3 视觉效果毛玻璃效果_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

4-3 视觉效果毛玻璃效果_html/css_WEB-ITnose

WBOY

풀어 주다： 2016-06-24 11:20:28

원래의

1198명이 탐색했습니다.

知识储备

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;

로그인 후 복사

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

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

4-3 视觉效果 毛玻璃效果_html/css_WEB-ITnose

知识储备

效果实现

4-3 视觉效果毛玻璃效果_html/css_WEB-ITnose