CSS：背景过滤器的解决方法？

77

backdrop-filter 是最新的CSS功能，现代浏览器（至少从2016年7月1日起）尚不可用。

Chrome 51backdrop-filter通过实验性Web平台标志提供支持。
Safari 9.1支持带-webkit-前缀
Firefox 47不支持

处于这种无法使用的状态，我想知道是否存在任何其他方法来获得相同的结果。

也欢迎针对blur，，grayscale...的JS解决方法

backdrop-filter可以通过https://bugs.chromium.org/p/chromium/issues/detail?id=497522跟踪其发展

html css

— ryanafrish7
source

1

可以请你正好指定你想要的阐述或解释新功能？

— Sriker章

1

@SrikerCh模糊，灰度滤镜

— ryanafrish16年

1

在chrome bug跟踪器中为问题加注

— Ali

使用另一个div设置背景和所需的效果，并使用与目标元素相同的位置和大小并应用滤镜，这不会影响目标元素的内容

— 27px

0

从Chrome M76开始，背景音乐滤镜现已出厂，没有前缀，并且没有需要的标志。

https://web.dev/backdrop-filter/

— 梅森·弗里德
source

27

目前在Firefox 74上仍不支持backdrop-filter。并不是每个人都使用Chrome或基于铬的浏览器，我也不赞成这样做，因为这不是问题的答案。

— 布鲁诺·芬格

4

谢谢你的反对。由于问题是“背景过滤器的解决方法”，因此我认为人们可能会对了解Chrome不需要解决方法感兴趣。Firefox正在开发此功能，今天可以使用layout.css.backdrop-filter.enabled标志进行试用。

— 梅森（Jason）

@Bruno Finger Firefox支持background-filter，但您需要在about：config上更改两个选项，请检查一下

— 我有10个手指

好吧，到了2020年末，Firefox仍然没有它！太可惜了，它仍然处在几个标记的后面，所以，是的……这不是“解决方法”的正确答案。

— Felipe N Moura

81

我用它来获得流行的毛玻璃效果。直到有人成功发明了一个好的polyfill，backdrop-filter我才使用稍微透明的背景作为后备：

/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

该过滤器将在当前支持的浏览器中运行。（启用了实验性Web平台功能的Safari和Chrome）backdrop-filter如果该规范在此之前未更改，则该代码也应在支持无前缀的将来的浏览器中工作。

不带背景滤镜支持的示例：

— 杜夫莱
source

@support是否可在所有浏览器上使用？

— 滴

当然，@ support并非在所有浏览器中都适用，但是在所有支持背景过滤器的浏览器中都可以使用，因此上述后备功能应该可以正常使用。

— Duvrai

66

我不知道您是否仍在追问这个问题，但对于将来的其他用户：

使用CSS伪类可以如下实现此效果，而无需JavaScript！如下图所示：

body,
main::before {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
}

main {
  margin: 100px auto;
  position: relative;
  padding: 10px 5px;
  background: hsla(0, 0%, 100%, .3);
  font-size: 20px;
  font-family: 'Lora', serif;
  line-height: 1.5;
  border-radius: 10px;
  width: 60%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}

main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);
  z-index: -1;
}

<main>
  <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &#45;
    even those we love. Because we see things so often, we see them less and less."
    <footer>&mdash;
      <cite>
        Joseph B. Wirthlin
      </cite>
    </footer>
  </blockquote>
</main>

展开摘要

可以在Codepen上看到实时示例：https ://codepen.io/jonitrythall/pen/GJQBOp

快速说明：

根据HTML文档的结构，您的z索引可能与示例中描述的z索引不同。

— 克罗诺
source

14

好的解决方法。但是有一个备用功能，因为背景中的其他元素不会模糊。

— ryanafrish16年

7

唯一的问题是它当然不是动态的。它与静态图像有关。但针对该特定情况的好解决方法:)

— jaminroe

2

据我了解，：before伪类与我们刚在其上使用的主体获得相同的背景图像，filter: blur(2px);因此此技巧不适用于背景中的其他元素。

— 喀多

我知道这将是可能的javascript。你不知道有多少人会告诉别人这是不可能的，除非你使用JS

— oldboy

使用时有什么办法做到这一点main { width: calc(100% - 48px); max-width: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); }？我似乎无法使它工作：/如果我应用transform: translate(50%, 50%)到模糊的伪元素，则模糊的图像与实际图像匹配，但是模糊部分的位置未对齐。

— oldboy

9

使用SVG过滤器。~~他们像魅力一样工作。~~签出此示例CodePen。

backdrop-filterChrome Canary现在默认支持。它也在Firefox开发的2019年优先列表中。因此，它将很快在所有浏览器中得到支持，但是现在您可以使用SVG过滤器。

更新资料

SVG过滤器不能完全正常工作backdrop-filter。这只是一种解决方法，如果下面有移动的元素，则无法使用。无论如何，我认为我们backdrop-filter很快就能在生产中使用。Chrome Beta现在默认启用了它！这也意味着边缘。

— 艾哈迈德
source

虽然我们大力鼓励与外部资源的链接以备份您的答案，但我们不鼓励“仅链接”的答案，因为如果链接过期，它们将变得无用。请更新您的答案以包括完整的解决方案。

— IT拖欠时间

听起来不错。SVG过滤器的有趣用法。

— ryanafrish19年

0

您可以尝试向背景图片添加其他过滤器：

https://css-tricks.com/almanac/properties/f/filter/

这样做的缺点是，它仅适用于图像。

基本上，CSSfilter属性有10个内置过滤器：

模糊（px）
亮度（％）
对比（％）
阴影（h阴影v阴影模糊散布色）
灰度（％）
色相旋转度
倒置（％）
不透明度（％）
饱和度（％）
棕褐色（％）

另外，您可以为其提供一个url，该URL包含带有适当过滤器的XML文件。

— 巴林特
source