html - 仅文本而不是父 span/div/body 的 CSS 背景？

Question

我不确定这是否可行，但我想知道是否可以只为文本设置背景颜色，而不是包含文本的 span/div/P 标签。

EG

这里的文字...

“this”的每个字符都是黑底白字，“空格”是蓝底，“text”这个词是黑底白字等等。

类似于聋人在某些电视节目中看到的内容 - 字幕...

但我不想用 div 或 span 包含每个/每个单词 - 因为这会使整个 HTML 编码变得巨大...

根据我收集/搜索的内容，我可以为整个“容器”设置背景，而不仅仅是为容器中的“文本”设置背景。

示例:How do I set background color of text only in CSS?

上面设置了整个h1标签为绿色背景。

PS - 我仅以“绿色”为例 - 但我想到了其他颜色，甚至图片作为背景。但我希望文本内容可见..

PS，如果上述可以做到，是否也可以“不透明”文本背景？所以实际/主要背景是部分可见的，但保持文本“实心”。

我使用了不透明，但它使前景文本不透明(没有保持原样)。

Answer 1

这是我使用 JavaScript 找到的解决方案。它绝对不仅是 CSS，而且是我用最少的代码所能获得的:

注意:检查下面更新的 JSFiddles! http://jsfiddle.net/fq4ez69t/1/

它会找到您的“p”标签中的所有空格(即，将其更改为您需要的任何内容)并将它们替换为类为 .space 的 span，这样您就可以在您的 CSS 中设置样式。

这是 JS:

var str = document.getElementsByTagName("p")[0].innerHTML;
var newstring = str.replace(/ /g, '<span class="space"> </span>');
document.getElementsByTagName("p")[0].innerHTML = newstring;

---

更新#1

刚想到这个。也许将 getElementsByTagName("p")[0].innerHTML; 更改为类似 document.getElementsByClassName('shaded')[i]; 的内容，并在任何地方使用此类你想要的文字看起来像那样。这是使用 for 循环完成的，如下所示:

http://jsfiddle.net/fq4ez69t/2/

只需将类 shaded 添加到您希望看起来像上图的文本元素中，瞧!

var shadedtextblocks = document.getElementsByClassName("shaded");
for(var i = 0; i < shadedtextblocks.length; i++)
{
  var str = shadedtextblocks[i].innerHTML;
  var newstring = str.replace(/ /g, '<span class="space"> </span>');
  shadedtextblocks[i].innerHTML = newstring;
}

更新 #2 - 现在可以使用背景图片。

http://jsfiddle.net/37s7ex2j/

这是适用于 p 和 h1 标签并使用 jQuery 的更新版本。它不会在您的背景图像之上打印背景。看起来好多了，但是脚本有点慢。结果如下:

$('.shadedtext').each(function(){
        //FOR P ELEMENTS
    var text = $.trim($('p').text()),
        word = text.split(' '),
        str = "";
    $.each( word, function( key, value ) {
      if(key != 0) { str += " "; }
      str += "<span class='shade'>" + value + "</span>";
    });
    $('p').html(str);
});