相关疑难解决方法(0)

HTML

<div>
    <p>inverted color</p>
</div>

CSS

div {
    background-color: #f00;
}
p { 
    color: /* how to use inverted color here in relation with div background ? */
}

有没有办法p用css 反转颜色？

color: transparent;为什么color: invert;即使在CSS3中也没有？

注意:我在我的问题中保留了最新版本的书签,效果很好,并且基于雅各布的答案.如果您正在寻找要使用的书签,请使用该书签.如果您只想要一些适用于Chrome的精彩内容,请参阅leosok的精彩答案.

我希望能够使用JavaScript书签反转页面上所有元素的颜色.我知道要反转颜色,你从255(xFF)中减去每个RGB十六进制值,但除此之外,我不确定如何继续.

我怎么能做到这一点？

使用jQuery是可以接受的,它只需要在Chrome上运行,但如果它在Firefox中有效则可以.

这是排除图像 - 背景,文本和链接颜色都应该被反转.基本上任何从CSS中获取颜色的东西.

更新 这是一个更新的书签,修复了嵌套元素问题,并将在很多不同的网站上工作(包括这个)

UPDATE2 添加了对透明度的一些支持,处理具有默认背景颜色rgba(0,0,0,0)的元素.现在更多的网站应该使用更新的网站.

javascript: (function ($) {
    function load_script(src, callback) {
        var s = document.createElement('script');
        s.src = src;
        s.onload = callback;
        document.getElementsByTagName('head')[0].appendChild(s);
    }

    function invertElement() {
        var colorProperties = ['color', 'background-color'];
        var color = null;
        for (var prop in colorProperties) {
            prop = colorProperties[prop];
            if (!$(this).css(prop)) continue;
            if ($(this).data(prop) != $(this).css(prop)) continue;

            if (($(this).css(prop) === 'rgba(0, 0, 0, 0)') || ($(this).css(prop) === 'transparent')) {
                if ($(this).is('body')) { …