javascript - 没有样式化子节点的样式化跨度文本节点

Question

所以我正在为一个论坛创建一个主题插件，用户经常在该论坛中输入带有自定义颜色的文本。这是作为跨度上的内联样式实现的。

默认情况下，论坛采用深色配色方案，因此大部分文本都是浅色的。如果我使用浅色方案创建主题，则很难看到此文本。

我想到了使用 CSS5 颜色过滤器来定位带有内联颜色的文本:

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

通过反转和旋转色谱，可以将浅蓝色变为深蓝色，将浅红色变为深红色，从而保留色调但使其更暗。这确实有效，但它的副作用是还会反转图像和文本中嵌入的其他元素的颜色。

我想对子元素进行另一种颜色反转，但这会使图像看起来像垃圾，因为显然色调旋转根本不是很准确。

一个解决方案是让 CSS 仅针对 span 的文本节点而不是任何子元素，但这似乎不可能吗？除非我遗漏了什么，否则我看不到任何文本节点选择器。

我可以在 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 允许颜色百分比