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

CSS: Workaround to backdrop-filter?

提问by ryanafrish7

backdrop-filteris a recent CSS feature, that is not yet available in modern browsers (at least as of July 1, 2016).

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

• Chrome 51 supports backdrop-filtervia Experimental Web Platform flag.
• Safari 9.1 supports it with -webkit-prefix
• Firefox 47 have no support

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

Being in such an unusable state, I would like to know whether there exists any alternative way to bring in the same result.

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

JS workarounds for blur, grayscale,… are also welcome

也欢迎blur, grayscale,... 的JS 解决方法

The development of backdrop-filtercan be tracked through https://bugs.chromium.org/p/chromium/issues/detail?id=497522

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

采纳答案by Mason Freed

As of Chrome M76, backdrop-filter is now shipped, unprefixed, and without a needed flag.

从 Chrome M76 开始，背景过滤器现已发货，不带前缀，并且不需要标记。

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

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

回答by Duvrai

I use this to get the popular frosted glass effect. Until someone successfully invents a good polyfill for backdrop-filterI'm using a slightly transparent background as a fallback:

我用它来获得流行的磨砂玻璃效果。直到有人成功发明了一个好的 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);
  }
}

The filter will work in currently supportedbrowsers. (Safari and Chrome with experimental Web Platform features enabled) The code should also work in future browsers that support unprefixed backdrop-filterif the spec doesn't change before that.

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

Examples without and with backdrop-filter support:

没有和有背景过滤器支持的例子：

回答by Krono

I don't know if you're still chasing this question, but for other users in future:

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

This effect can be accomplished as follows with CSS Pseudo-Classes, no JavaScript is necessary! shown below:

这个效果可以用 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>

Live example can be seen on Codepen: https://codepen.io/jonitrythall/pen/GJQBOp

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

Quick Note:

快速说明：

Depending on the structure of your HTML document, yourz-indexes may be different to the one described in the example.

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

回答by Ahmed

Use SVG filters. They work like a charm.Checkout this example CodePen.

使用 SVG 过滤器。他们的工作就像一个魅力。查看此示例CodePen。

backdrop-filteris now supported by default in Chrome Canary. It's also in the 2019 priority list for Firefox development. So, it will soon be supported across all browsers, but for now you can use SVG filters.

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

Update

更新

SVG filters don't work exactly like backdrop-filter. It's only a workaround and it doesn't work if there's moving elements beneath it. Anyway, I think we're going to be able to use backdrop-filterin production very soon. It's now enabled by default in Chrome Beta! Which also means Edge.

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

回答by Bálint

You could try to add different filters to the background images:

您可以尝试为背景图像添加不同的过滤器：

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

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

The downfall to this, is that it only works on images.

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

Basically, there are 10 built-in filters for the CSS filterproperty:

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

• blur(px)
• brightness(%)
• contrast(%)
• drop-shadow(h-shadow v-shadow blur spread color)
• grayscale(%)
• hue-rotate(deg)
• invert(%)
• opacity(%)
• saturate(%)
• sepia(%)

• 模糊（像素）
• 亮度（％）
• 对比（％）
• 阴影（h-shadow v-shadow 模糊传播颜色）
• 灰度(%)
• 色调旋转（度）
• 倒置（％）
• 不透明度(%)
• 饱和度(%)
• 棕褐色(%)

And additionally, you can provide it an url, wich contains an XML file with the appropariate filter.

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