CSS: Workaround to backdrop-filter?

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

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

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

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

185278 次浏览
小开

你可以尝试给背景图片添加不同的滤镜:

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

这样做的缺点是，它只对图像起作用。

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

  • 模糊(px)
  • 亮度(%)
  • 对比度(%)
  • 下拉阴影(h 阴影 v 阴影模糊扩展颜色)
  • 灰度(%)
  • 色相旋转(度)
  • 倒置(%)
  • 不透明度(%)
  • 饱和(%)
  • 深褐色(%)

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

小开

2001年5月22日更新:

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

句法:

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

旧的解决方案

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

这种效果可以通过如下 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 索引可能与示例中描述的索引不同。

小开

我用这个来获得流行的磨砂玻璃效果。除非有人成功地为 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: none) or (backdrop-filter: none)) {
.backdrop-blur {
background-color: rgba(255, 255, 255, .5);
-webkit-backdrop-filter: blur(2em);
backdrop-filter: blur(2em);
}
}

该过滤器将在 当前支持的浏览器中工作。(支持实验性 Web 平台功能的 Safari 和 Chrome)如果在此之前规范没有改变的话，这些代码也应该可以在未来支持无前缀 backdrop-filter的浏览器中使用。

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

transparent fallback blurred

小开

使用 SVG 过滤器。

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

更新

SVG 过滤器的工作原理与 backdrop-filter不完全一样。这只是一个变通方案，如果下面有移动的元素，它就不起作用。不管怎样，我想我们很快就能在生产中使用 backdrop-filter了。现在已经在 Chrome Beta 中默认启用了！也就是说 Edge。

小开
最佳答案

从 ChromeM76开始，背景过滤器已经发布，没有前缀，也没有所需的标志。

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

注意: (因为 Mozilla 还没有发布这个功能，所以这个答案一直遭到反对) : 这个功能可以在 Safari、 Chrome 和 Edge 中使用，但是在 Firefox 中还没有。Mozilla 是 计划，很快就会发布，但还没有。因此，这个答案并不包含一个“解决方案”，而仅仅是关于哪些浏览器 要求解决方案的更多信息。这似乎仍然是有用的信息。

小开

只是想增加一些对我有用的具体解决方法，也许对某些人有用。

这个想法是将弹出窗口后面的每个元素都包装到 .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。

小开

正如在 这一页中所解释的那样，在 about:config页面上将优先级 layout.css.backdrop-filter.enabled的值从 false改为 true似乎对我有用。

我使用的是 Firefox Developer 87.0 b1(64位)

小开

我认为这是一个很好的解决方案，工作周围的背景过滤器，但不一样:

你可以和@support 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>

小开

如果你需要在 Javascript 中检查背景过滤器的可用性，你可以使用:

CSS.supports("backdrop-filter", "blur(10px)")

有个条件:

if (CSS.supports("backdrop-filter", "blur(10px)")) {
// some code when supported
} else {
// some code when not supported
}

这种方法不适用于 Internet Explorer，所以如果有备用方案，那就更好了。

小开

所有桌面浏览器现在似乎都支持拖放过滤器。然而，最新的安卓版 Firefox 默认情况下仍然不支持(https://caniuse.com/css-backdrop-filter)。我将这种方法用于移动 Firefox 和老式浏览器，在这个例子中，我使用 Bootstrap 变量(https://www.thiscodeworks.com/firefox-css-backdrop-filter-workaround-css/60facccc0c27230014227666) :

/* Slightly transparent. Fallback to .9 (undefined --bs-bg-opacity) */
.backdrop-blur {
background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity, .9));
}
     

/* if backdrop support, very transparent and blurred. --bs-bg-opacity set to .5 */
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
.backdrop-blur {
--bs-bg-opacity: .5;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
}

提交答案