css 网页实现的遮罩毛玻璃&高斯模糊效果

本文链接：https://blog.csdn.net/ykkkkkk007/article/details/123236023

本文通过一个实例展示了如何使用CSS创建毛玻璃和高斯模糊背景特效。主要涉及的技术点包括：背景图片设置、层级控制、背景大小调整、滤镜效果以及使用overflow属性隐藏超出部分。通过创建多个div层，结合背景图片、滤镜模糊和遮罩层的透明度，实现了清晰与模糊的视觉对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分析

需要两张一模一样的图片，一个是模糊的，一个是不模糊的
不糊的一张需要添加overflow: hidden;
增加一个遮罩图，设置透明度

需要用到的css知识

background 设置背景
z-index 设置图片的层级
background-size 设置背景图的大小
filter 滤镜效果
overflow: hidden;超出部分隐藏实现过程

实现过程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>毛玻璃&高斯模糊背景特效</title>

</head>

<body>

    <div class="bg"></div>
    <div class="bg2">
        <div class="bg3"></div>
    </div>
    <div class="mask">
        <p>
            有木有发现图片遮罩下面的部分是模糊的~~
        </p>
    </div>
</body>
<style>
    p {
        color: rgba(255, 255, 255, .8);
    }
    
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
        height: 300px;
        width: 500px;
        background: url("https://www.wuyabala.com/static/img/logo.jpg") no-repeat;
        background-size: cover;
        filter: blur(10px);
    }
    
    .bg2 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
        height: 130px;
        width: 500px;
        background-color: aqua;
        overflow: hidden;
    }
    
    .bg3 {
        height: 300px;
        width: 500px;
        background: url("https://www.wuyabala.com/static/img/logo.jpg") no-repeat;
        background-size: cover;
    }
    
    .mask {
        position: absolute;
        left: 0;
        top: 130px;
        z-index: -1;
        height: 300px;
        width: 500px;
        background: rgba(0, 0, 0, .35);
    }
</style>

</html>