CSS实现背景图片高斯模糊效果

@cooltea

已于 2022-04-30 17:45:01 修改

阅读量6.7k

点赞数 9

文章标签： css css3 html

于 2022-04-28 13:39:26 首次发布

本文链接：https://blog.csdn.net/apple_54470279/article/details/124471956

版权

效果演示

未添加高斯模糊的效果：

代码：

body {
    background: url(./images/bg.jpg);
    background-size: cover;
}

添加了高斯模糊的效果：

代码：

body {
    /* 省略部分代码 */
}
body::before {
    content: "";
    position: absolute; /* 一定要用绝对定位 */
    width: 100%;
    height: 100%;
    backdrop-filter: blur(30px); /* 模糊半径 */
}

这里是通过 ::before 伪元素实现，原理就是给 body 添加了一个拥有高斯模糊的遮罩层。

当然也适用于其他元素，举个例子：

代码：

.img-show {
    /* 省略部分代码 */
}
.img-show::before {
    content: "";
    position: absolute; /* 一定要用绝对定位 */
    width: 100%;
    height: 100%;
    border-radius: 15px; /* 这里记得给遮罩层加一个圆角！！！ */
    backdrop-filter: blur(30px); /* 模糊半径 */
}

源代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>高斯模糊效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: url(./images/bg.jpg);
            background-size: cover;
        }
        body::before {
            content: "";
            position: absolute; /* 一定要用绝对定位 */
            width: 100%;
            height: 100%;
            backdrop-filter: blur(30px); /* 模糊半径 */
        }
        .img-show {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 750px;
            height: 450px;
            border: 2px solid #bebebe;
            border-radius: 15px;
            box-shadow: 8px 8px 20px rgba(0, 0, 0, .3), -8px -8px 20px rgba(0, 0, 0, .3);
            background: url(./images/show.jpg);
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="img-show"></div>
</body>
</html>