【原】CSS3代码教程-毛玻璃效果

冷眸软件库 2019-08-26

展开全文

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

比如，下面这个效果：

html文件：

<main>
    <blockquote>
        "冷眸软件库，本站的资源来自于全网，冷眸搬运工主要为大家带来软件分享，技术分享，源码分享以及最新资讯，感谢你们支持我，我会把最好的资源分享给大家。        <br />
        <br />
        "冷眸软件库，本站的资源来自于全网，冷眸搬运工主要为大家带来软件分享，技术分享，源码分享以及最新资讯，感谢你们支持我，我会把最好的资源分享给大家。"        <footer>——            <cite>冷眸</cite>
        </footer>
    </blockquote></main>

css文件:

body{
    background: url("img/9.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);}

输出后的效果：

CSS3代码教程-毛玻璃效果

我们可以看到文字的阅读显然变得很困难，如果想要改善，可以提高背景色的不透明度，如下：

CSS3代码教程-毛玻璃效果

文字的阅读性提高了，但是失去了想要达到的设计美感。如果我们想要二者兼得，可以借助滤镜达到这样的效果。

由于我们不能直接对元素本身进行模糊处理，所以就先给该元素添加一个伪元素，然后将其定位在元素的下层，它的背景将无缝匹配到<body>元素的背景。

完整代码如下：

css文件

body, main::before{
    background: url("img/9.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;}