码云 CSS3的filter和backdrop-filter实现高斯模糊
在 Web 开发中，当需要对页面元素或背景应用高斯模糊效果时，CSS3 提供了两个非常有用的属性：filter和backdrop-filter。这两个属性虽然都能实现模糊效果，但它们在应用方式和效果展示上有着显著的区别。接下来，我们详细了解一下这两个属性的用法及其差异。
API 介绍
filter
filter属性应用于元素本身，它不仅可以用来实现高斯模糊（blur()函数），还可以用来添加其他视觉效果，如亮度（brightness()）、对比度（contrast()）、灰度（grayscale()）等。当使用blur()函数时，它会使得元素自身（包括其内容）变得模糊。
语法：
// 使用空格分隔多个滤镜 filter: none; // 高斯模糊 filter: blur(4px); // 线性亮度 filter: brightness(); // 对比度 filter: contrast(); // 阴影效果 filter: drop-shadow(); // 灰度 filter: grayscale(); // 色相旋转 filter: hue-rotate(); // 反转图像 filter: invert(); // 转换透明度 filter: opacity(); // 饱和度 filter: saturate(); // 褐色 filter: sepia(); // SVG 滤镜 filter: url();
其中高斯模糊 filter: blur();
backdrop-filter
与filter不同，backdrop-filter属性不是作用于元素本身，而是作用于元素背后的内容（即该元素的背景部分，可能是其父元素或其他元素的内容）。这允许开发者在保持元素内部内容清晰的同时，对背景应用视觉效果，如高斯模糊。
对比：
filter 属性必须要加载图像上或者背景图上，而 backdrop-filter 只要是一个元素就可以。
语法：
backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%);
示例
filter 实例一
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapBox2 {
width: 800px;
height: 300px;
overflow: hidden;
position: relative;
background-image: url("./win.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;
filter: blur(10px);
}
.subBox {
position: absolute;
width: calc(100% - 100px);
height: calc(100% - 100px);
z-index: 2;
}
.text {
position: relative;
/* z-index: 10; */
font-size: 40px;
font-weight: bold;
color: #f00;
}
</style>
</head>
<body>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">全部模糊</div>
</div>
</body>
</html>
效果如下：
这里要注意的一点是，添加模糊后，实际的大小会超出我们设置的宽高，因为周围的毛边效果，你可以在外面包一层并设置 overflow: hidden;
filter 实例二
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapBox2 {
width: 800px;
height: 300px;
/* overflow: hidden; */
position: relative;
}
.subBox {
width: 100%;
height: 100%;
position: absolute;
width: calc(100% - 100px);
height: calc(100% - 100px);
z-index: 2;
filter: blur(10px);
}
.text {
position: relative;
/* z-index: 10; */
font-size: 40px;
font-weight: bold;
color: #f00;
}
</style>
</head>
<body>
<div class="wrapBox2">
<img src="./win.jpeg" class="subBox" />
<div class="text">全部模糊</div>
</div>
</body>
</html>
效果如下：
这种方式的话，文字和图片由于是平级的，所以文字要么在图片下方，要么在上方（根据 z-index 来控制），而不会对文字进行模糊。
backdrop-filter 实例一
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapBox2 {
width: 800px;
height: 300px;
overflow: hidden;
position: relative;
background-image: url("./win.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.subBox {
position: absolute;
width: calc(100% - 100px);
height: calc(100% - 100px);
z-index: 2;
backdrop-filter: blur(10px);
/* top: 100px; */
}
.text {
position: relative;
/* z-index: 10; */
font-size: 40px;
font-weight: bold;
color: #f00;
}
</style>
</head>
<body>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">部分模糊</div>
</div>
</body>
</html>
效果如下：
可以看到，backdrop-filter 属性不必设置在一个图片元素上面，而是任何元素上面就行，这种方式我觉得更加灵活
总结
- 如果只是模糊一张图片，那么直接用 filter 就可以实现。
- 如果想要用一个模糊蒙层盖住 html 页面/图片的某一部分，那么使用 backdrop-filter。
当然，使用 backdrop-filter 也可以满足第一种场景。
以上关于 CSS 使用 filter 和 backdrop-filter 实现高斯模糊效果(示例代码)的全部内容，更多相关 css 高斯模糊内容请搜索码云笔记以前的文章或继续浏览下面的相关文章。
以上关于CSS3的filter和backdrop-filter实现高斯模糊的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » CSS3的filter和backdrop-filter实现高斯模糊
