想要将整个页面设置为除指定div以外的灰度 [英] Want to make the whole page in grayscale except specified div

问题描述

我有一个CSS代码，可以使整个页面变成灰度.

I have a css code that could make the whole page in grayscale.

<style type="text/css">
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}
</style>

我现在想将一个iframe嵌入不会受到影响的div中.我已经搜索了有关解决方案，并且找到了:not选择器.当我在 http://www.w3.org/TR/上参考6.6.7时css3-selectors/#negation 我想我找到了解决方案，因为即使我将html用作css选择器，它也可能起作用

I now want to embed an iframe inside a div that would not be affected. I have searched about the solution and fount :not selector. When I refer to 6.6.7 at http://www.w3.org/TR/css3-selectors/#negation I think i have found the solution because it may work even I put html as my css selector

html|:not(x)

因此，我像上面的代码一样更改了代码，但没有做任何更改.我担心问题是由网站的设计引起的，所以我决定使用最简单的HTML在jsfiddle中进行编码

So I changed the code just like the above code but nothing changed. I was worried about the problem is caused by the design of my website so I decided to code them in jsfiddle in the most simple HTML

<div id="abc" class="abc"><font color="red">This should be a normal text.</font></div>
<font color="red">This should be an affected text.</font>

在CSS中

html|*:not(.abc) {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%); }

链接: http://jsfiddle.net/4vxyqdye/1/ PS:在以前的版本中，我仅使用:not(.abc)，但所有元素都变为灰度.

Link: http://jsfiddle.net/4vxyqdye/1/ PS: In the previous version I used :not(.abc) only but all elements become grayscale.

推荐答案

考虑一下选择器的重量，html是一个通用选择器，如果您执行以下操作，则它比像clases或IDs这样的更具体的选择器要轻. >

Think in the weight of selectors, html is a general selector, less heavy than more specific selectors, like clases or IDs, if you do something like :

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

html .class-you-wanna-exlude {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
}

我认为这可以解决您的问题.

i think this will solve your issue.

这篇关于想要将整个页面设置为除指定div以外的灰度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！