CSS(Firefox)-如何使用backdrop-filter和clip-path together？

xe55xuns 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(187)

我想有一个彩色过滤器在我的网页的一半。我试图通过在整个页面上应用一个带有背景过滤器的固定div，然后使用clip-path剪切div形状来实现这一点。

div {
  position: fixed;
  width: 500px;
  height: 500px;
  top: 0;
  left: 0;
}

#front {
  background-color: rgba(255, 0, 255, 0.5);
  clip-path: polygon(50% 0, 100% 0, 100% 100%) !important;
  backdrop-filter: invert(100%);
  width: 600px;
}

#back {
  background-color: rgba(0, 0, 255, 1);
}

<div id="back"></div>
<div id="front"></div>

这段代码在chrome中运行良好：“前”div放置在“后”div上，并将其背景滤镜应用于其可见部分。
如果运行在Firefox（v89.0.1），剪辑路径正在剪切div，但背景过滤器仍然应用于原始（矩形）形状。
您也可以从两个不同的浏览器访问this codepen来查看问题。
我怎样才能把这两条规则结合起来，获得我想要的效果呢？

css

来源：https://stackoverflow.com/questions/68088578/css-firefox-how-to-use-backdrop-filter-and-clip-path-toghether

2条答案

按热度按时间

3mpgtkmj1#

到目前为止，Firefox已经（再次）启用backdrop-filter很长一段时间了，它似乎工作得很合理。但是在Firefox中与clip-path结合仍然有一个问题。我已经设置了'clip-path：padding-box'到一个页面的主体，我正在努力实现一个不相关的效果。由于主体没有填充，并且我试图实现的效果仅在CSS中不起作用，我只是忘记了clip-path，因为它本身没有效果。（我会在部署前清理）
我花了相当长的时间才弄清楚，FF没有在页面上显示任何背景过滤器的原因是剪辑路径。
我可以很容易地为我修复它，但在FF中似乎有一个关于clip-path与backdrop-filter组合的一般问题。（Chrome确实工作得很好。）
当我有时间的时候，我会更深入地调查并提交一份bug报告，刚才我想，这个答案可能会帮助处于类似情况的人保存一些时间。

赞(0）回复(0）举报 2023-05-02

pcww981p2#

您需要先启用backdrop-filter，因为Firefox默认情况下禁用它。

打开一个新的Firefox选项卡，在地址栏中键入about:config。按Enter键。
您应该会看到一个警告。单击“Accept the Risk and Continue（接受风险并继续）”按钮。显示此消息的原因是，在此页面上，所有实验特性（包括backdrop-filter）均已显示，这些特性在启用时可能会产生毛刺并影响性能。
在搜索栏中键入layout.css.backdrop-filter.enabled。您应该看到该值被设置为false。在最右边，有一个可逆的箭头（或者随便你怎么称呼它）。单击它可将值更改为true。