样式跨度textnode没有样式子节点

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()});
    });
});