CSS3:毛玻璃效果

通常我们喜欢使用半透明颜色作为背景。如果将其叠放到照片背层上,就会增加视觉上的冲击力,不过这样会导致文字阅读困难。

比如,下面这个效果:

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;
}

效果如图:

毛玻璃效果

推荐阅读更多精彩内容

  • 毛玻璃效果做的好能使页面显得非常生动立体。直接上图body { min-height: 100vh; box-...
    一直以来都很好阅读 536评论 0 1
  • 毛玻璃效果做的好能使页面显得非常生动立体。直接上图 去掉那些式样方面的代码,上面实现毛玻璃效果的核心代码如下: 当...
    张歆琳阅读 11,274评论 4 44
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 2,187评论 1 13
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    繁华退却阅读 1,228评论 0 0
  • 想必每个女孩都有那么个最最亲近,永远无法替代和割舍的朋友,我们叫她闺密。 闺密,顾名思义,闺中密友。是女孩之间小秘...
    浴火重生小油鸡阅读 385评论 2 1