样式化跨文本节点而无需设计子节点样式

Question

因此，我为用户经常使用自定义着色输入文本的论坛创建主题插件。这是在跨度上以内联样式实现的。

该论坛默认情况下有深色配色方案，所以大部分文字都很淡。如果我使用浅色配色创建主题，这个文本将很难被看到。

我想用一个CSS5彩色滤光片与内嵌色彩目标文本：

.Comment span[style^=color] { 
    filter: hue-rotate(180deg) invert(100%); 
    -webkit-filter: hue-rotate(180deg) invert(100%); 
} 

通过反相和颜色光谱这个变成淡蓝色旋转成一个深蓝色和淡红色到暗红色，保持色调但使其更暗。这实际上起作用，但它也具有反转图像和文本中嵌入的其他元素的颜色的副作用。

我想在子元素上做另一种颜色反转，但这会使图像看起来像垃圾，因为显然色调旋转并不是非常准确。

一个解决方案是让CSS只定位跨度的文本节点，而不是任何子元素，但这似乎不可能？除非我错过了某些东西，否则我没有看到文本节点的选择器。

有什么我可以在jQuery中执行此颜色反转？我宁愿不必销毁页面上的所有颜色，因为这会让用户感到不安。

Answer 1

这种解决方案只能去打火机不解决问题：

我错读的问题...我试图删除这一点，因为它并没有解决问题为浅色背景，但它仍然出现了。

这可以通过使用rgba

来完成测试和工程：

$(window).load(function() { 
     var col = $('.Comment').css('color').replace(')', ', 0.20)').replace('rgb', 'rgba'); 
     $('.Comment').css('color', col);  
});  

var col转换rgb到rgba允许色率

Answer 2

下面是一个使用JavaScript库tinycolor的解决方案。纯粹的CSS解决方案会更受欢迎，但似乎不可能。

$.getScript('https://rawgit.com/bgrins/TinyColor/master/tinycolor.js').done(function() { 
    $('.Comment span[style^=color]').each(function() { 
     var color = tinycolor($(this).css('color')).toHsl(); 
     color.l = 1 - color.l; 
     $(this).css({'color': tinycolor(color).toRgbString()}); 
    }); 
});