因此,我为一个论坛创建了一个主题插件,用户经常在其中输入带有自定义颜色的文本。这被实现为跨度上的内联样式。
默认情况下,论坛使用深色方案,因此大部分文本为浅色。如果我使用浅色方案创建主题,则该文本将很难看清。
我想到使用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 col
将rgb
转换为rgba
,允许颜色百分比