CSS设置高斯模糊效果

原创已于 2022-09-15 17:25:05 修改 · 673 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2022-09-04 10:15:05 首次发布

Web开发专栏收录该内容

47 篇文章

订阅专栏

本文介绍了如何利用CSS的backdrop-filter属性创建高斯模糊效果，使元素背景呈现出毛玻璃般的视觉体验。关键代码是backdrop-filter: blur(4px)；通过调整参数值可以改变模糊程度。示例代码展示了在网页标题上应用该效果的方法。

高斯模糊（英语：Gaussian Blur），也叫高斯平滑，是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果，通常用它来减少图像噪声以及降低细节层次。这种模糊技术生成的图像，其视觉效果就像是经过一个毛玻璃在观察图像。

实现效果

在这里插入图片描述

上方的文字好像放在了一个毛玻璃下面，一种若隐若现的感觉。

代码

<div class="header"></div>
<h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, quae?</h1>
<h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, quae?</h1>

body {
    background-color: bisque;
}
.header {
    height: 80px;
    position: sticky;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.16);
    top: 0;
    backdrop-filter: blur(4px);
}