仅限文字的CSS背景＆amp;不是父级/ div / body？

Question

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

EG

这里的文字......

“this”的每个字符都是带有白色文本的黑色背景，“space”将具有蓝色背景，“text”字样将是带有白色文本等的黑色背景....

聋人在某些电视节目中看到的东西 - 字幕......

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

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

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

以上将整个h1标签设置为绿色背景。

PS - 我只使用'绿色'作为例子 - 但我有其他颜色，甚至图片作为背景。但我希望文本内容可见..

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

我使用了opaque，但它使前景文本不透明（不保持固定）。

Answer 1

这是我使用JavaScript找到的解决方案。它绝对不仅仅是CSS，而且只要我用最少的代码就可以得到它：

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

它会找到“p”标记中的所有空格（即将其更改为您需要的任何空格），并使用span替换为类.space，以便您可以在CSS中设置样式。 / p>

这是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);
});

Answer 2

如果您想在电视上播放字幕，可以在文字上添加text-shadow：

.myTextClassSelector{
    text-shadow: green 1px 1px, green -1px 1px, green -1px -1px, green 1px -1px;
}

<div>
  <p class="myTextClassSelector">This text here</p>
  And this other text here.
</div>

Answer 3

在容器中选择文本

简而言之：没有

你不能只设置div中文本的背景，或者为每个单词选择每种颜色。

您可以做的是设置每个容器的文本：

<div class="class"></div>

.class {
    //background, can also use rgba(0,0,0,0.5) <- semi transparent black.
    background-color: white;

}

  

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

将文本保留在内联块元素中将使选择仅保留一些文本。

示例：

p {
  background-color: rgba(5, 5, 5, 0.5);
  color: white;
}
p.inline {
  display: inline-block;
}

Inline
<p>Lorem ipsum dolar si amet</p>
Inline-block
<br>
<p class="inline">Lorem ipsum dolar si amet</p>