【问题标题】：Styling span textnode without styling child nodes样式化跨度文本节点而不样式化子节点
【发布时间】：2015-09-17 18:24:11
【问题描述】：

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

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

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

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

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

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

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

我可以在 jQuery 中做些什么来执行这种颜色反转吗？我宁愿不必破坏页面上的所有颜色，因为这会让用户感到不安。

【问题讨论】：

有趣。小旋转没有问题。 jsfiddle.net/urqqbz23
这很好地展示了色调旋转是如何不可逆的，但请注意它仅适用于 Firefox。图像的效果要差得多。

标签： javascript jquery html css colors

【解决方案1】：

这个解决方案只是轻而易举并不能解决问题：

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

这可以通过使用rgba来完成

经过测试和工作：

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

var col 将 rgb 转换为 rgba 允许颜色百分比

【讨论】：

这不是降低不透明度吗？问题是在保持色调的同时使浅色背景上的浅色文本更容易看到。
我相信您对不透明度的看法是正确的。编辑后，我尝试删除解决方案，因为它只会与您的需求相反。它只是让它被禁用，所以我重新打开它。在我的网站上，我正在运行一个可以满足您需求的 PHP 函数，但它适用于 hex 并且 jquery 转换为 rgb。如果您想看看，我很乐意发布。

【解决方案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()});
    });
});

【讨论】：