html的过滤器使用,html-CSS：背景过滤器的解决方法？

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

backdrop-filter是最新的CSS功能，在现代浏览器中尚不可用(至少从2016年7月1日开始)。

Chrome 51通过实验性Web平台标志支持backdrop-filter。

Safari 9.1支持backdrop-filter前缀

Firefox 47不支持

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

还欢迎使用JS解决模糊，灰度等问题的方法。

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

ryanafrish7 asked 2020-02-03T22:10:36Z

5个解决方案

42 votes

我用它来获得流行的毛玻璃效果。 直到有人成功发明了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的将来的浏览器中工作。

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

Duvrai answered 2020-02-03T22:11:33Z

42 votes

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

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

"The more often we see the things around us - even the beautiful and wonderful things - 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 -

even those we love. Because we see things so often, we see them less and less."

—

Joseph B. Wirthlin

"The more often we see the things around us - even the beautiful and wonderful things - 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 -

even those we love. Because we see things so often, we see them less and less."

—

Joseph B. Wirthlin

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

快速说明：

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

Krono answered 2020-02-03T22:13:15Z

4 votes

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

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

更新资料

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

Ahmed answered 2020-02-03T22:11:04Z

0 votes

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

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

Mason Freed answered 2020-02-03T22:13:40Z

-2 votes

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

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

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

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

模糊(px)

亮度(％)

对比(％)

阴影(h阴影v阴影模糊散布色)

灰度(％)

色相旋转度

倒置(％)

不透明度(％)

饱和度(％)

棕褐色(％)

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

Bálint answered 2020-02-03T22:15:00Z