因此,我为一个论坛创建了一个主题插件,用户经常在其中输入带有自定义颜色的文本。这被实现为跨度上的内联样式。

默认情况下,论坛使用深色方案,因此大部分文本为浅色。如果我使用浅色方案创建主题,则该文本将很难看清。

我想到使用CSS5彩色滤光片,以彩色内联作为目标文本:

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

通过反转和旋转色谱,可以将浅蓝色变成深蓝色,将浅红色变成深红色,保留色调,但使颜色变深。这实际上是可行的,但它的副作用还在于使图像和嵌入文本的其他元素的颜色反转。

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

一种解决方案是让CSS仅定位范围的文本节点,而不是任何子元素,但这似乎不可能?除非缺少某些内容,否则我看不到文本节点的任何选择器。

我可以在jQuery中执行一些操作来执行这种颜色反转吗?我宁愿不必破坏页面上的所有颜色,那样会使用户不满意。

最佳答案

此解决方案只是轻巧而不能解决问题:

我误读了问题...我试图删除此问题,因为它不能解决浅色背景的问题,但仍会出现。

这可以通过使用rgba来完成

经过测试和工作:

$(window).load(function() {
      var col = $('.Comment').css('color').replace(')', ', 0.20)').replace('rgb', 'rgba');
      $('.Comment').css('color', col);
});
var colrgb转换为rgba,允许颜色百分比

09-30 19:15
查看更多