Chrome中的CSS反转文件管理器 [英] css invert filer in Chrome

问题描述

我有

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类也将图片反转.

This works in MIE. Chrome insists on inverting also the pictures with the jpg class.

有什么建议吗?

推荐答案

来自了解CSS滤镜效果:

当浏览器加载网页时，它需要应用样式，执行布局然后呈现页面，因此需要注意一些事情.在所有这些步骤之后并且在将页面复制到屏幕之前，过滤器就会启动.他们要做的是将渲染页面的快照作为位图图像，然后对快照中的像素执行一些图形魔术处理，然后将结果绘制在原始页面图像的顶部.

When a browser loads a web page it needs to apply styles, perform layout and then render the page so there's something to look at. Filters kick in after all those steps and just before the page is copied to the screen. What they do is take a snapshot of the rendered page as a bitmap image, then perform some graphics magic on the pixels in the snapshot and then draw the result over the top of the original page image.

您要将过滤器应用于 body ，并且该过滤器将作为展平图像应用于整个元素，而不是单独地每个子元素，因此您无法在像你想做的孩子.

You're applying a filter to the body, and the filter is applied to the whole element as a flattened image, not each child element individually, so you can't override the filter on a child like you're trying to do.

您可以 进行的操作是将 invert(100％)应用于要显示为未反转的选择器，因为双重反转的图像再次变得正常

What you can do in your case is apply invert(100%) to the selector you want to show up as uninverted, because a double inverted image becomes normal again.

这篇关于Chrome中的CSS反转文件管理器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！