CSS背景仅用于文本而不是父span/div/body？

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”标签中的所有空格（即，将其更改为您需要的任何内容）并将其替换为 span 类 .space，以便您可以在 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);
});

Answer 2

在容器中选择文本

简而言之：否

您不能只设置 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 编码变得庞大...

将文本保留在 inline-block 元素中将使选择仅保留一些文本。

例子：

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>

Answer 3

如果您想要电视上的字幕，您可以在文本中添加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>