backdrop-filter

基础概念

backdrop-filter 是 CSS 中的一个属性，用于对元素背后的区域应用滤镜效果。这个属性可以让你在不改变元素本身的情况下，对其背景进行模糊、亮度调整、颜色转换等视觉效果处理。

类型与应用场景

常见的滤镜类型

模糊（blur）：使背景变得模糊，常用于创建焦点效果或背景虚化。
亮度（brightness）：调整背景的亮度。
对比度（contrast）：改变背景的对比度。
灰度（grayscale）：将背景转换为黑白。
饱和度（saturate）：调整背景的色彩饱和度。

应用场景

模态框或弹窗：使用模糊效果可以让模态框或弹窗显得更加突出，同时保持背景内容的可读性。
导航栏或侧边栏：通过滤镜效果增强导航元素的视觉吸引力。
图像叠加：在图像上叠加文字或图标时，使用滤镜可以避免文字和背景之间的颜色冲突。

示例代码

以下是一个简单的示例，展示如何使用 backdrop-filter 创建一个带有模糊背景效果的卡片：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backdrop Filter Example</title>
<style>
  .card {
    width: 300px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px) brightness(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
</style>
</head>
<body>

<div class="card">
  <h2>Card Title</h2>
  <p>This is a simple card with a backdrop filter applied to create a blurred background effect.</p>
</div>

</body>
</html>

遇到的问题及解决方法

问题：`backdrop-filter` 在某些浏览器中不被支持。

原因：backdrop-filter 是一个相对较新的 CSS 特性，并非所有浏览器都完全支持。

解决方法：

使用前缀：为不同的浏览器添加相应的前缀，如 -webkit-backdrop-filter 用于 Safari 和旧版 Chrome。
回退方案：提供一个不使用 backdrop-filter 的回退样式，确保在不支持的浏览器中也能正常显示。

.card {
  width: 300px;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(5px) brightness(1.1); /* Safari 和旧版 Chrome */
  backdrop-filter: blur(5px) brightness(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

通过这种方式，可以确保在大多数现代浏览器中都能获得良好的用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

剃须刀页面ASP.NET核心6-如何添加模糊背景图像

、、、

我已经成功地添加了一个“背景图像”到我的Razor页面应用程序。我已经做了好几个小时了，看到了很多关于如何添加图像的线索，但是却找不到正确的方法(模糊)，也无法看到其他人正在经历同样的行为。<html lang="en"> <meta charset="utf-8" /> <meta name="viewport

浏览 4提问于2022-07-18得票数 0

6回答

CSS在背景图像上模糊，但在内容上不模糊

、、

我做了。我如何在不模糊内容的情况下模糊背景？

浏览 2提问于2013-12-05得票数 38

回答已采纳

1回答

如何在CSS中逐渐(羽化/渐变/过渡)模糊？

、、

理想情况下，我可以使用线性渐变语法backdrop-filter: linear-gradient(blur(8px), blur(8px), blur(0));，但这似乎不受支持。有什么想法吗？

浏览 51提问于2021-06-06得票数 0

1回答

模糊了网站的侧面

、

blure侧站点1：#main-style {}content: "";height: 135%;top: -30px;overflow: hidden;}

浏览 3提问于2022-04-10得票数 0

回答已采纳

2回答

背景的回退颜色-过滤器:模糊()；

、

我目前正在使用： background-color: #FFFFFF90;} 但是由于FireFox目前不支持backdrop-filter: blur()，所以它使用了#FFFFFF90的后盾。

浏览 4提问于2022-04-12得票数 1

回答已采纳

1回答

我想在背景中有一个稍微模糊的视频，但由于某种原因，在屏幕的边缘有白色边框。屏幕右下角的Screenshot。如何删除这些白色边框？如果视频没有模糊，它就不会有白色边框。我试着将宽度和高度设置为110%，但没有帮助。 :root { --menu: #D00000;} box-sizing: border-box; font-family: Quicksand, sans-serif; position:

浏览 11提问于2020-07-07得票数 2

回答已采纳

1回答

我如何在英雄图像上获得这种混合模式效果，并修复导航菜单的不透明度？

、、、

我试图在英雄形象和透明导航栏上实现这种混合模式效果，并将其溶解到英雄形象中。我试图通过设置背景颜色和一些不透明度来使导航栏透明，但它看起来并不像我想要的那样。 ? 到目前为止，我得到的是： ? 下面是代码:任何帮助都将非常感谢。谢谢。 .navbar { opacity: 0.56; padding-top: 1.5rem; pa

浏览 21提问于2021-07-30得票数 0

2回答

边缘中的CSS.supports对受支持的项返回错误

、

filter: blur(20px) )"));console.log(CSS.supports("( backdrop-filter: blur(20px) )"));日志：后两者是不正确的，因为b

浏览 1提问于2018-09-28得票数 1

回答已采纳

1回答

在div内容中使用CSS产生模糊效果

大家好我试着用下一条规则来达到这个效果：但我得到了这个结果：如果我使用“过滤器模糊”属性，就会得到以下结果：如何将模糊效果应用到div后面的图像中？但在所有的图像中都没有，只是在div封面的一部分。

浏览 4提问于2021-12-09得票数 0

回答已采纳

7回答

CSS:解决背景滤镜的问题？

、

backdrop-filter是最近的CSS功能，在现代浏览器中还不能使用(至少在2016年7月1日)。 Chrome 51支持backdrop-filter通过实验Web平台标志。JS解决方法blur, grayscale，…也是受欢迎的可以通过以下方式跟踪backdrop-filter的发展 https://bugs.chromium.org/p/chromium/issues

浏览 88提问于2016-07-01得票数 107

回答已采纳

1回答

在Chrome上，背景过滤器不起作用吗？

、、

我目前正在开发一个网站，它要求backdrop-filter使用它的模糊功能。所有的工作都是按照预期进行的：我知道并非所有的浏览器都支持backdrop-filter，这就是为什么我没有提到火狐distinguishes between a leader and a follower” ― Steve Jobs</h2>下面是相应的CSS： backd

浏览 2提问于2021-03-12得票数 2

回答已采纳

3回答

只有一个背景-一次工作的过滤器

、

background-color: rgba(255, 255, 255, 0.1); transition: 0.3s; backdrop-filterleft: 0; overflow-x: hidden; backdrop-filter

浏览 0提问于2019-06-27得票数 1

回答已采纳

2回答

CSS背景-滤镜: Safari中的模糊和Chrome渲染问题

、

: #555;#container{ width: 150px; backdrop-filter150px; background-color: rgba(0,0,0,0.5); position: absolute; backdrop-filter如果对象的父对象及其本身具有backdrop-filter属性，则在Safari浏览器中

浏览 43提问于2020-12-02得票数 0

2回答

如果不支持背景滤镜，则应用一组不同的样式

、、

background-color: #FFF;}.panel { opacity: .5; backdrop-filter

浏览 9提问于2016-07-25得票数 3

1回答

ionic 5 ios深色主题在菜单栏打开和关闭的标题中显示阴影

、、、

我想知道当ionic ios中的菜单栏关闭时，它会在标题中显示一些阴影样式。我查看了inspect元素，但不能准确地确定正在应用的是哪个元素。看起来它就在.toolbar-container元素周围！但是不知道具体在哪里或者如何解决这个问题！以下是捕获的过渡的屏幕截图，您可以看到阴影： ? 以下是侧边菜单关闭后的外观： ? 顺便说一句，这是ios的默认深色主题，带有离子角度侧边菜单。

浏览 43提问于2021-02-04得票数 0

回答已采纳

1回答

CSS背景滤镜:模糊过渡/延迟？

我有一个带有-webkit-box-reflect的元素，另一个元素的反射上方有backdrop-filter/-webkit-backdrop-filter元素。, 255, 255, 0.1); position: relative; backdrop-filter

浏览 56提问于2021-03-17得票数 1

1回答

使用背景过滤器后不可见的工具提示

、、

display: inline-block; padding-bottom: 30px; backdrop-filter

浏览 4提问于2022-04-12得票数 0

回答已采纳

2回答

背景-滤镜与滤光片

、

为什么属性backdrop-filter和filter同时存在？saturate() caniuse.com说(和)现代浏览器比backdrop-filter支持filter要好得多。

浏览 2提问于2018-01-12得票数 11

回答已采纳

1回答

背景滤镜:不使用背景的模糊效果？

、、

如何在不使用背景的情况下使backdrop-filter:blur效果？因为backdrop-filter:blur并不是在所有浏览器中都能工作

浏览 0提问于2017-07-17得票数 0

2回答

当更改页面上其他元素的混合模式时，背景过滤器无法工作。

、

浏览器版本为Chrome 87.0.4280.88无论如何，我将暂时停止使用悬停效果，但是如果有一个诡计，那么最好让世界知道这一点。

浏览 5提问于2021-02-15得票数 3

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

backdrop-filter

基础概念

相关优势

类型与应用场景

常见的滤镜类型

应用场景

示例代码

遇到的问题及解决方法

问题：backdrop-filter 在某些浏览器中不被支持。

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问题：`backdrop-filter` 在某些浏览器中不被支持。