Question

我有

BODY
{
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-ms-filter: invert(100%);
-o-filter: invert(100%);
filter: invert(100%);
}

和

.jpg
{
-webkit-filter: invert(0%) !important;
-moz-filter: invert(0%) !important;
-ms-filter: invert(0%) !important;
-o-filter: invert(0%) !important;
filter: invert(0%) !important;
}

这适用于MIE。 Chrome坚持要用jpg类反转图片。

有什么建议吗？

Answer 1

来自Understanding CSS Filter Effects：

当浏览器加载网页时，需要应用样式，执行布局，然后渲染页面以便查看。在所有这些步骤之后以及在将页面复制到屏幕之前，过滤器启动。他们所做的是将渲染页面的快照作为位图图像，然后对快照中的像素执行一些图形魔术，然后将结果绘制在原始页面图像的顶部。

您正在对body应用过滤器，过滤器将作为展平图像应用于整个元素，而不是单独应用于每个子元素，因此您无法覆盖像您这样的子项上的过滤器我正试图这样做。

你可以在你的情况下做的是将invert(100%)应用到你想要显示为未反转的选择器，因为双反转图像再次变为正常。

Answer 2

错误在第一个语句中。要修复它，请使用以下

*
{
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -ms-filter: invert(100%);
    -o-filter: invert(100%);
    filter: invert(100%);
}

.jpg
{
    -webkit-filter: invert(0%) !important;
    -moz-filter: invert(0%) !important;
    -ms-filter: invert(0%) !important;
    -o-filter: invert(0%) !important;
    filter: invert(0%) !important;
}

css在Chrome中反转过滤器

2 个答案: