樣式跨度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()});
    });
});