!important 仍然不够强：图像颜色保持反转

Question

我想为一个网站制作一个深色主题，并使用类似于下面代码的东西来反转 <body> 中除了图像之外所有内容的颜色。

我无法找出为什么此代码无法按预期工作：如您所见，即使使用 !important，图像仍保持倒置：

body { background-color: grey; }

p { color: white; }

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

<!DOCTYPE html>
<html>
    <head>
    </head>
    
    <body>
        <div class="body">
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
        </div>
        <p>The image above should be white</p>
    </body>
</html>

不知道!important究竟有多重要，我应该怎么做才能让图像不倒置。

当然我不想在网站上的每张图片上都添加一个class/id，因为即使我认为这可以解决我的问题，它也不会那么高效和易于阅读.

Answer 1

嗯，很简单，你要反转一次！

我们已经学习了 -1 * -1 = +1，就像那样： Inversion*Inversion=Normal!
所以将图像的 0% 设置为 100%，

提示： !important不需要覆盖规则，那是在它上面定义的，下面的规则会自动覆盖上面的规则，所以你甚至可以删除它。

答案代码：

body { background-color: grey; }

p { color: white; }

.body {
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
    filter: invert(100%);
}
            
img {
    -webkit-filter: invert(100%) !important;
    -moz-filter: invert(100%) !important;
    -o-filter: invert(100%) !important;
    -ms-filter: invert(100%) !important;
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    
    <body>
        <div class="body">
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
        </div>
        <p>The image above should be white</p>
    </body>
</html>

Answer 2

您正在将反转应用于不同的对象。你应该反转同一个对象。试试这个：

body { background-color: grey; }

p { color: white; }

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

<!DOCTYPE html>
<html>
    <head>
    </head>
    
    <body>
        <div class="body">
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
        </div>
        <p>The image above should be white</p>
    </body>
</html>

您可以将 class 添加到正文 light 并向其添加反转 (100%) 并具有不同的 class dark 并添加反转 ( 0%) 并切换它。

Answer 3

问题根本与 !important 标签无关。

您的第一个 .body 规则集在 body 标签上反转，这会反转您的整个网站。这与对所有元素应用反转不同。

此 .body 规则不适用于每个 child 元素，因此图像标签上没有反转，您可以使用 img 规则将其还原。

您应该做的是将 invert(100%) 应用于您的图像。然后你将整个网页反转一次，除了图像。然后图像被反转两次（首先是因为 body 被反转，然后是 img 上的 inverted(100%)。倒两次和没倒一样。

Answer 4

我知道这个问题已经回答了，正如已经提到的，关键是，以这种方式编写，你必须执行两次转换。这里的重点是，通过反转颜色来实现 暗模式 的整个假设是错误的。

您所做的只是反转颜色，您并没有使颜色必然“变暗”。

如果您的文字是这种颜色怎么办：

反转颜色为：

这不是某些人对黑暗模式的期望。在那种情况下，您将添加另一个“例外”来将您的元素转换回来并在不同的规则中实现它。

我的建议是为浅色模式和深色模式定义每个元素的不同版本，这需要做更多的工作，但结果更干净，最重要的是，更可预测。当然，如果您愿意，也可以使用库或研究一些最佳实践来实现暗模式。

!important 仍然不够强：图像颜色保持反转

!important still not strong enough: images colors stay inverted

html

css

darkmode

嗯，很简单，你要反转一次！

答案代码：