毛玻璃效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/github_37213295/article/details/88049718

目录

 

准备基础

最终效果：

---

准备基础

HSLA(H,S,L,A) 说明： 
H：Hue(色调)。

          0(或360)表示红色，120表示绿色，240表示蓝色

          取值为：0 - 360 
S：Saturation(饱和度)。

          取值为：0.0% - 100.0% 
L：Lightness(亮度)。

          取值为：0.0% - 100.0% 
A：Alpha透明度。

          取值0~1之间。 

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

 blur() 滤镜使用如下：

main {
  width:600px;
  height:300px;
  margin:0 auto;
  padding:20px;
  font-size:18px;
  line-height:28px;
  border-radius:15px;
  background: hsla(0,0%,100%,.5);
  filter:blur(4px);
}

效果图：缺点（整个元素都会被模糊，文字可读性差）

最终效果：

body {
background: url("http://pic37.nipic.com/20140115/14882888_134859703000_2.jpg") 0 / cover fixed;
   background-attachment：fixed;
}
body ,main::before{
  background: url("http://pic37.nipic.com/20140115/14882888_134859703000_2.jpg") 0 / cover fixed;
}
main {
  width:600px;
  height:300px;
  margin:0 auto;
  padding:20px;
  font-size:18px;
  line-height:28px;
  position:relative;
  border-radius:15px;
  background: hsla(0,0%,100%,.3);
  overflow:hidden;
}
main::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  filter:blur(20px);
  z-index:-1;
  margin:-30px;
}

<main>
    <blockquote>
            "The only way to get rid of a temptationThe grounds were covered with dark                 
           green grass through which stretched a straight white stone path .On both 
           sides of the path were planted what I believed to be poinsettias.Now the 
           flowers were surrounded by pinkish leaves instead of bright red ones as they 
           should have been.Trimmed with light green edges,the leaves looked delicate 
           and charming.Along the long  pulling and hooting on its way southward.[...]"
        <footer>－
            <cite>
                Oscar Wilde,
                The Picture of Dorian Gray
            </cite>
        </footer>
    </blockquote>
</main>