如何使用 CSS 反转颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17741629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I invert color using CSS?
提问by Bhojendra Rauniyar
HTML
HTML
<div>
<p>inverted color</p>
</div>
CSS
CSS
div {
background-color: #f00;
}
p {
color: /* how to use inverted color here in relation with div background ? */
}
Is there any way to invert the pcolor with CSS?
有没有办法p用CSS反转颜色？
There is color: transparent;why not color: invert;even in CSS3?
还有color: transparent;，为什么不color: invert;即使在CSS3？
回答by Bruno Lemos
Add the same color of the background to the paragraph and then invert with CSS:
为段落添加与背景相同的颜色，然后使用 CSS 反转：
div {
background-color: #f00;
}
p {
color: #f00;
-webkit-filter: invert(100%);
filter: invert(100%);
}<div>
<p>inverted color</p>
</div>回答by ???
Here is a different approach using mix-blend-mode: difference, that will actually invert whatever the background is, not just a single colour:
这是使用 的另一种方法mix-blend-mode: difference，它实际上会反转任何背景，而不仅仅是单一颜色：
div {
background-image: linear-gradient(to right, red, yellow, green, cyan, blue, violet);
}
p {
color: white;
mix-blend-mode: difference;
}<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscit elit, sed do</p>
</div>回答by Jan Peter
I think the only way to handle this is to use JavaScript
我认为处理这个问题的唯一方法是使用 JavaScript
Try this Invert text color of a specific element
试试这个Invert text color of a specific element
If you do this with css3 it's only compatible with the newest browser versions.
如果您使用 css3 执行此操作，则它仅与最新的浏览器版本兼容。
