此解决方案只有更轻才解决问题：

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，允许颜色百分比

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

样式跨度textnode而不设置子节点样式

2 个答案:

此解决方案只有更轻才解决问题：