我想有一个彩色过滤器在我的网页的一半。我试图通过在整个页面上应用一个带有背景过滤器的固定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来查看问题。
我怎样才能把这两条规则结合起来,获得我想要的效果呢?
2条答案
按热度按时间3mpgtkmj1#
到目前为止,Firefox已经(再次)启用backdrop-filter很长一段时间了,它似乎工作得很合理。但是在Firefox中与clip-path结合仍然有一个问题。我已经设置了'clip-path:padding-box'到一个页面的主体,我正在努力实现一个不相关的效果。由于主体没有填充,并且我试图实现的效果仅在CSS中不起作用,我只是忘记了clip-path,因为它本身没有效果。(我会在部署前清理)
我花了相当长的时间才弄清楚,FF没有在页面上显示任何背景过滤器的原因是剪辑路径。
我可以很容易地为我修复它,但在FF中似乎有一个关于clip-path与backdrop-filter组合的一般问题。(Chrome确实工作得很好。)
当我有时间的时候,我会更深入地调查并提交一份bug报告,刚才我想,这个答案可能会帮助处于类似情况的人保存一些时间。
pcww981p2#
您需要先启用
backdrop-filter
,因为Firefox默认情况下禁用它。打开一个新的Firefox选项卡,在地址栏中键入
about:config
。按Enter键。您应该会看到一个警告。单击“Accept the Risk and Continue(接受风险并继续)”按钮。显示此消息的原因是,在此页面上,所有实验特性(包括
backdrop-filter
)均已显示,这些特性在启用时可能会产生毛刺并影响性能。在搜索栏中键入
layout.css.backdrop-filter.enabled
。您应该看到该值被设置为false。在最右边,有一个可逆的箭头(或者随便你怎么称呼它)。单击它可将值更改为true。gfx.webrender.all
。默认情况下也应该为false。类似地将其更改为true。成交!