开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

backdrop-filter

基础概念

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

相关优势

视觉增强：通过滤镜效果，可以为用户界面增添更多的视觉层次感和美观性。
无侵入性：不会影响元素的布局和尺寸，适用于各种复杂的布局设计。
灵活性：可以结合其他 CSS 属性（如 opacity、transform）实现更丰富的视觉效果。

类型与应用场景

常见的滤镜类型

模糊（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);
}

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

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

有帮助

没帮助

相关·内容

使用 backdrop-filter 实现滤镜遮罩

使用 backdrop-filter 实现滤镜遮罩这里，我们可以借助 backdrop-filter 实现一种遮罩滤镜效果。...filter VS backdrop-filter 在 CSS 中，有两个和滤镜相关的属性 -- filter 和 backdrop-filter。...backdrop-filter 最为常见的使用方式是用其实现毛玻璃效果。...: blur(6px); } } CodePen Demo -- filter 与 backdrop-filter 对比 filter 和 backdrop-filter 使用上最明显的差异在于...使用 backdrop-filter 实现首屏置灰遮罩这样，我们可以快速的借助 backdrop-filter 实现首屏的置灰遮罩效果： html { position: relative;

2.8K2 0

CSS实现图片磨砂玻璃效果

主要涉及 backdrop-filter,filter 这两个 CSS属性。...: blur(5px); } 第一种单纯利用 backdrop-filter CSS 属性实现 backdrop-filter CSS 属性: 可以让你为一个元素后面区域添加图形效果.../* 关键词值 */ backdrop-filter: none; /* 指向 SVG 滤镜的 URL */ backdrop-filter: url(commonfilters.svg#filter...*/ backdrop-filter: invert(70%); /* 反相 */ backdrop-filter: opacity(20%); /* 透明度 */ backdrop-filter:...#filter) blur(4px) saturate(150%); /* 全局值 */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter

9644 1

除了 filter 还有什么置灰网站的方式？

使用 backdrop-filter 实现滤镜遮罩这里，我们可以借助 backdrop-filter 实现一种遮罩滤镜效果。...filter VS backdrop-filter 在 CSS 中，有两个和滤镜相关的属性 -- filter 和 backdrop-filter。...backdrop-filter 最为常见的使用方式是用其实现毛玻璃效果。...: blur(6px); } } CodePen Demo -- filter 与 backdrop-filter 对比[2] filter 和 backdrop-filter 使用上最明显的差异在于...使用 backdrop-filter 实现首屏置灰遮罩这样，我们可以快速的借助 backdrop-filter 实现首屏的置灰遮罩效果： html { position: relative;

8482 0

css设置背景模糊周边有白色光晕，如何解决？

: blur(20px); 但是注意，backdrop-filter 不能直接加在背景图本身样式上，会导致不生效。...backdrop-filter 属性需要在具有定位的元素上使用，例如 position: relative 或 position: absolute； backdrop-filter 应用于的元素需要有一个背景元素在其后...如果没有这样的背景元素，backdrop-filter 将不会生效。确保父级元素有可见的背景内容。...所以我们将 backdrop-filter 放在 img-bg::before 里，即可生效： .img-bg::before { content: ""; position...background-color: rgba(0, 0, 0, 0.6); /* 60%不透明度的黑色 */ z-index: 1; /* 确保蒙层在背景之上 */ backdrop-filter

2071 0

你一定见过我，但是却不知道原来我叫“毛玻璃”

两行关键代码即可起飞需要设置当前元素的背景透明度非 1，这里我们通过使用 background-color: rgba(255, 255, 255, 0.5); 来设置背景颜色，并设置了透明度为 0.5 使用 backdrop-filter...属性来设置当前元素后面内容的模糊度支持 backdrop-filter 属性的浏览器实现毛玻璃效果 demo 我的兼容性问题目前大部分的主流浏览器例如 Chrome、Edge、Safari 等都支持了这个属性...针对 Firefox，使用 filter 属性来实现毛玻璃效果此 demo 演示了静态背景下在不支持 backdrop-filter 属性浏览器中如何实现毛玻璃效果不支持 backdrop-filter

7230 0

CSS 奇思妙想 | 全兼容的毛玻璃效果

通过本文，你能了解到最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果在至今不兼容 backdrop-filter 的 firefox 浏览器，如何利用一些技巧性的操作...，巧妙的同样实现毛玻璃效果，让这个效果真正能运用在业务当中什么是 backdrop-filter backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）...backdrop-filter 与 filter 对比我们使用 backdrop-filter 与 filter 同时实现一个毛玻璃效果作为对比，伪代码如下： ...CodePen Demo -- filter 与 backdrop-filter 对比在 backdrop-filter 之前，想实现上述的只给元素背景添加滤镜效果还是非常困难的，并且，对于静态画面还好...backdrop-filter 的兼容性 backdrop-filter 其实已经诞生挺久了，然而，firefox 至今都不兼容它！ ?

2.5K2 0

毛玻璃 CSS 特效的兼容性方案探究

一、backdrop-filter 是金手指吗？毛玻璃效果在 iOS 系统上比较常见，比如消息通知栏、手机助手卡片等地方，所以咱打开苹果官网看看！...去查了查兼容性：backdrop-filter -- caiuse[1] emmm～，再考虑到我司自己魔改的 Webview 内核情况。。。...另一个设置模糊度的 CSS 属性就是 filter，那么我们的另一个思路就是通过 filter 来模拟 backdrop-filter 属性的效果。...且 filter 的兼容性会更好：filter -- caiuse[3] 我们看看 filter 和 backdrop-filter 效果的差异： /* filter 的写法，将 backdrop-filter...另外 backdrop-filter 属性是有性能问题的，咱就是说，都 2022 年了，求求大家升级一下手上的设备吧！

1.8K1 0

妙用 CSS 构建花式透视背景效果

主要就是颗粒化的背景 background加上backdrop-filter: blur() 即可。首先，我们需要实现颗粒背景。...255, 255, 1) 2px); background-size: 4px 4px; } 这样，我们就成功的将背景颗粒化：当然，此时透出的背景看上去非常生硬，也不美观，所以，我们还需要 backdrop-filter...background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px); background-size: 4px 4px; backdrop-filter...: blur(10px); } 这样，我们就实现了一开始所展示的效果：这里需要注意的是，background-size 的大小控制，和不同的 backdrop-filter: blur(10px)...{ background: linear-gradient(45deg, transparent, #fff 4px); background-size: 6px 6px; backdrop-filter

5012 0

妙用滤镜构建高级感拉满的磨砂玻璃渐变背景

它就是：多块不规则渐变背景 + 高斯模糊蒙版在 CSS 中，也就是借助 background + backdrop-filter: blur() 即可实现。...实现高斯模糊蒙版接下来，这一步最为关键，就是使用 backdrop-filter 实现高斯模糊蒙版。...叠在上述几个元素上方即可，最关键的一行代码 backdrop-filter: blur(150px) .g-bg::before { content: ""; position...: fixed; top: 0; left: 0; bottom: 0; right: 0; backdrop-filter: blur(150px);...: blur()，而不是 filter: blur()，如果你对这两个滤镜是使用选择还有所疑惑，可以看看的我的这篇文章讲解 -- 深入探讨 filter 与 backdrop-filter 的异同借助

1.6K3 0

CSS mask 实现鼠标跟随镂空效果

backdrop-filter链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter 使用方式和 filter完全一致！...backdrop-filter: blur(10px); 下面是 MDN 中的一个示意效果： backdrop-filter是让当前元素所在区域后面的内容模糊，要想看到效果，需要元素本身半透明或者完全透明...有兴趣的可以查看这篇文章：CSS backdrop-filter简介与苹果iOS毛玻璃效果 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com) 文章链接：https://www.zhangxinxu.com...阴影实现在上面第一个例子中添加 backdrop-filter .wrap::before{ content:''; position: absolute; width: 100px;...渐变实现现在在第二个例子中添加 backdrop-filter .wrap::before{ content: ''; position: absolute; width:

2.5K2 0

使用纯 CSS 实现超酷炫的粘性气泡效果

就这么简单，父容器添加白色底色以及对比度滤镜 filter: contrast(8)，子容器添加 filter: blur(5px) 即可，这样，我们就能得气泡的融合效果，基本得到我们想要的效果：利用 backdrop-filter...也好办，在这里，我们尝试利用 backdrop-filter 去替换 filter。...两者之间的差异在于，filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素，如果你想了解更多关于 backdrop-filter 的信息，可以戳我的这篇文章...：深入探讨 filter 与 backdrop-filter 的异同。...: blur(5px); } } 我们通过去到原来添加在 .g-footer 上的 filter: blur(5px)，通过他的伪元素，叠加一层新的元素在它本身之上，并且添加了替代的 backdrop-filter

1.6K3 0

如何在网页置灰的时候，部分元素保持彩色-有意思的面试题

, 我本人图像处理方面比较菜，但是看起来全灰的算法不可逆，而且如果在元素上再盖一个canvas也不太好弄放弃R/G/B = 0.2126R' + 0.7152G' + 0.0722'B遮挡解决方案 backdrop-filter...有一个解决方案是用backdrop-filter做一个遮罩，毕竟filter还是有点损耗首屏性能的，虽然可以用transform开启硬件优化一些，我们还可以用遮罩的方式挡住也可以的，并且设置pointer-events...position: relative; width: 100%; height: 100%;}html::before { content: ""; position: fixed; backdrop-filter...inset: 0; z-index: 100;}还可以把遮罩的position换成absolute, 实现一个只置灰首屏的效果，不过我感觉没啥必要图片然后我们可以设置指定元素的z-index，超过backdrop-filter...的100就可以, 就有首屏+部分彩色的效果图片.not-gray{ position: relative; z-index:1000;}元素遍历标记backdrop-filter其实也有他的兼容性问题

8453 0

纯CSS 毛玻璃效果 💎

要实现模糊，我使用的是 backdrop-filter: blur(); 。...flex; justify-content: center; align-items: center; font-size: 60px; letter-spacing: 0.5em; backdrop-filter...0, 0, .3); } 毛玻璃复制代码上面的代码中，backdrop-filter

4.2K3 0

CSS position:fixed 定位基准元素为视口问题解决

当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。...的元素 perspective 值不为 none 的元素在 will-change 中指定了任意 CSS 属性设置了 contain: paint 的元素 filter 值不为 none 的元素 backdrop-filter

2291 0

每个前端开发需要了解的10个强大的CSS属性

地址：https://www.w3schools.com/cssref/css3_pr_filter.php Backdrop effects 我们可以使用backdrop-filter为图像背后的区域添加漂亮的滤镜效果...backdrop-filter提供了filter的所有属性。简而言之，它是一个应用于背景的滤镜效果。...请注意，backdrop-filter属性在某些浏览器中可能不被完全支持，请确保在使用时进行兼容性检查。... backdrop-filter: blur(5px); <...x-large; color: white; font-weight: 800; background-color: rgba(255, 255, 255, .3); backdrop-filter

2662 0

我常常因为不会写主题而感到和你们格格不入

顺便试了下 CSS 的 position:sticky 和 backdrop-filter:blur()。...position:sticky 没啥好扯的，来扯一下 backdrop-filter:blur()。这个属性貌似挺久前就有了，然而 Firefox …… 总之又得兼容他。...支持 backdrop-filter 的浏览器就会有一个毛玻璃效果，不支持也会有一个半透明背景。勉勉强强算得上优雅降级。

2511 0

【积水成渊】CSS磨砂玻璃效果和渐变主题色文字

border-radius: 15px; background: rgba(255, 255, 255, .9); // background: rgba(255, 255, 255, .3); // backdrop-filter...: blur(20px) brightness(150%); @supports (backdrop-filter: blur(20px) brightness(150%)) { background...: rgba(255, 255, 255, .3); backdrop-filter: blur(20px) brightness(150%); } h2 { font-size: 1.8em

6162 0

这几个CSS小技巧，你知道吗？

6.背景效果使用backdrop-filter在图片中添加背景。... backdrop-filter: blur(5px); <style...font-size: x-large; color: white; font-weight: 800; background-color: rgba(255, 255, 255, .3); backdrop-filter

2002 0

冷门又好用的 CSS 特性

比如，每年的国家公祭日很多网站会把颜色调整成黑白，就可以用 filter 一行代码搞定： 8. backdrop-filter 属性与 filter 类似的属性，backdrop-filter 属性将图形效果...MDN - backdrop-filter Can I Use - CSS Backdrop Filter 比如，可以用它做一个毛玻璃的效果： Codepen demo 关键代码： <div class.../images/roses.jpg) no-repeat; } p { background-color: rgba(255, 255, 255, 0.3); backdrop-filter:

1.5K1 0

博客主题重构记录

整体设计整体颜色设计基本不变，为了优化整体的样式统一性，主要改动点如下：移除副色调 hover 样式，使用下划线高亮 hover 可点击元素调整全局背景色调整卡片背景色为半透明，配合 CSS backdrop-filter...移除侧边栏的 Firefox 和 Mozilla 广告移除由 Vue.js 构建的自定义搜索，转为 Google 搜索直接跳转粘性元素调整 Navbar 和 Footer 粘性 navbar 配合 CSS backdrop-filter

1.6K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭