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

Question

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

• Chrome 51 通过 Experimental Web Platform 标志支持 backdrop-filter。
• Safari 9.1 支持 -webkit- 前缀
• Firefox 47 不支持

处于这种无法使用的状态，我想知道是否有其他方法可以带来相同的结果。

也欢迎 blur、grayscale 的 JS 变通方法

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

Answer 1

您可以尝试为背景图片添加不同的滤镜：

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

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

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

• 模糊（像素）
• 亮度(%)
• 对比度(%)
• drop-shadow(h-shadow v-shadow blur spread color)
• 灰度(%)
• 色相旋转（度）
• 反转(%)
• 不透明度(%)
• 饱和度(%)
• 棕褐色(%)

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

Answer 2

22 年 5 月 1 日更新：

Backdrop Filter 已获得进一步支持，请查看支持它的每个浏览器版本的链接和快速教程。

语法：

.element {
            backdrop-filter: <filter-function> [<filter-function>]* | none
         }

---

旧解决方案

我不知道你是否还在追这个问题，但对于未来的其他用户：

这个效果可以用 CSS Pseudo-Classes 如下实现，不需要 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-index 可能与示例中描述的不同。

Answer 3

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

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

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

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

不支持和支持背景过滤器的示例：

Answer 4

使用 SVG 滤镜。 他们的工作就像一个魅力。看看这个例子CodePen。

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

更新

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

Answer 5

从 Chrome M76 开始，背景滤镜现已发货，没有前缀，并且没有所需的标志。

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

注意：（由于 Mozilla 尚未发布此答案，因此该答案一直被否决）：此功能在 Safari、Chrome 和 Edge 中可用，但在 Firefox 中尚不可用。 Mozilla 是 planning 很快就会发布它，但还没有。因此，此答案不包含“解决方法”，而只是有关哪些浏览器需要解决方法的更多信息。这似乎仍然是有用的信息。

Answer 6

只是想添加对我有用的特定解决方法，也许它对那里的人有用。

这个想法是将应该在弹出窗口后面的每个元素包装到.blurred 中，并使用filter: blur(10px);（它具有更好的浏览器支持）使其模糊，但是弹出窗口元素本身应该在.blurred 之外.

在代码中是这样的：

.blurred {
    position: relative;
    z-index: 0;
    filter: blur(4px);
}

.popup {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.popup__box {
    margin-top: 20px;
    background-color: rgba(255, 0, 0, .1);
 }

<div class="blurred">
  <div>Maybe a navbar goes here</div>
  <h3>Hi, I'm blurred</h3>
  <img src="https://filesamples.com/samples/image/jpg/sample_640%C3%97426.jpg" alt="sample"/>
  <div>Maybe a footer goes here</div>
</div>

<div class="popup">
  <div class="popup__box">
    Hi, I'm a popup
  </div>
</div>

此解决方法的缺点是您必须将所有内容包装在 .blurred 类中，这有时很难（至少对我而言）与外部的其他元素一起管理 z-index。

Answer 7

正如this page 中所述，将about:config 页面上的首选项layout.css.backdrop-filter.enabled 的值从false 更改为true 似乎对我有用。

我使用的是 Firefox Developer 87.0b1（64 位）

Answer 8

我认为这是 wokraround 背景过滤器的一个很好的解决方案，但不一样：

您可以将它与@supports css 规则一起使用

@supports not (backdrop-filter: blur(4px)) {
    body > *:not(#element) {
        filter: blur(4px);
    }
}

body > *:not(#element) { /* select every child element in body but not the specified one*/
    background: #9fe2ff;
    filter: blur(4px);
}
#element {
    position: absolute;
    top:20%;
    left:10%;
    background-color: #ffffff;
    z-index:10;
}
div, p {
    margin: 5px;
    padding: 10px;
}

    

<body>
    <div>div element with some text</div>
    <p>paragraph with another text</p>
    <div id="element">Not blured element</div>
    <div>Another div with blured text</div>
    <p>another p </p>
</body>