纯CSS生成毛玻璃效果

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

今天我们尝试使用CSS绘制一个毛玻璃效果，在学习过程中，可以了解到CSS的几个属性：

filter: blur(模糊半径); // 元素模糊
background: hsla(色相, 饱和度, 亮度, 透明度)

blur

CSS中有一个blur()函数可以生成模糊效果，如下图所示：

纯CSS生成毛玻璃效果

上图基本代码：

<!DOCTYPE html>
<title>毛玻璃效果</title>
<body>
    <div class="background-box">
        <div class="txt-box">
            文字内容
        </div>
    </div>
</body>
<style>
    .background-box {
        width: 700px;
        height: 500px;
        background: url('https://cdn.pixabay.com/photo/2021/07/14/09/14/siberian-cat-6465485_960_720.jpg') no-repeat;
        background-size: 100% 100%;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        filter: blur(4px);
    }

    /* .txt-box {
        width: 300px;
        height: 200px;
        background: white;
        filter: blur(4px);
    } */
</style>
</html>

blur函数官方释义：developer.mozilla.org/zh-CN/docs/…

但是blur会使得整个元素都变得模糊，无法生成我们想要的毛玻璃效果。

半透明背景仿毛玻璃

最基本最简单的方式，使用半透明背景，如下图所示：

纯CSS生成毛玻璃效果

基础代码：

<!DOCTYPE html>
<title>毛玻璃效果</title>
<body>
    <div class="background-box">
        <div class="txt-box">
            文字内容, 毛玻璃效果
        </div>
    </div>
</body>
<style>
    .background-box {
        width: 800px;
        height: 600px;
        background: url("https://cdn.pixabay.com/photo/2021/07/14/09/14/siberian-cat-6465485_960_720.jpg") no-repeat;
        background-size: 100% 100%;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .txt-box {
        width: 600px;
        height: 400px;
        /*关键代码*/
        background: hsla(0,0%,100%,.3);

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
</style>
</html>

通过调整半透明颜色调整透明度，动画效果如下所示：

纯CSS生成毛玻璃效果

但是这种效果并不理想，透明度高的时候文字不易阅读，透明度太低视觉效果不好。

添加模糊层模拟毛玻璃

我们使用伪元素在原文字区域下方生成一个同样大小的半透明区域背景，来看下效果：

纯CSS生成毛玻璃效果

.txt-box::before {
        z-index: -1;/*将背景设置于文字之下*/
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(255, 0, 0, .5);
    }

然后我们将外层的背景图片加载到伪元素上：（为了便于区分，我们给伪元素添加了一层边框）

纯CSS生成毛玻璃效果

然后我们对伪元素添加模糊效果：

纯CSS生成毛玻璃效果

实际上，这时已经是非常好的毛玻璃效果了。

通过学习《CSS Secret》书籍，其中阐述到这种效果，作者仍然不满意毛玻璃的边框区域，仍然有改进空间。

后续通过margin: -30px扩大伪元素模糊范围，以及文字元素overflow: hidden切割超出部分，从而实现完美的毛玻璃效果，如下所示。

纯CSS生成毛玻璃效果

在学习过程中遇到一个新的属性：background-attachment，官方链接：(developer.mozilla.org/zh-CN/docs/…)

总结

当背景图不适合background-attachment: fixed时，需要使用简单的给文本元素添加透明度即可，虽然不完美。

当背景图可以使用background-attachment: fixed，此时可以使用比较复杂的方法：

1. 在文字与背景之间，添加一层元素（伪元素或者DOM元素）
2. 该层元素与文字元素大小相同，且其背景与最外层背景完全重合。
3. 对该层背景设置filter: blur(*)模糊效果
4. 通过模糊层元素外边距负值与文字元素的`overflow: hidden`生成边界清晰的毛玻璃边界

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。