我不确定这是否可行,但我想知道是否可以只为文本设置背景颜色,而不是包含文本的 span/div/P 标签。
EG
这里的文字...
“this”的每个字符都是黑底白字,“空格”是蓝底,“text”这个词是黑底白字等等。
类似于聋人在某些电视节目中看到的内容 - 字幕...
但我不想用 div 或 span 包含每个/每个单词 - 因为这会使整个 HTML 编码变得巨大...
根据我收集/搜索的内容,我可以为整个“容器”设置背景,而不仅仅是为容器中的“文本”设置背景。
示例:How do I set background color of text only in CSS?
上面设置了整个h1标签为绿色背景。
PS - 我仅以“绿色”为例 - 但我想到了其他颜色,甚至图片作为背景。但我希望文本内容可见..
PS,如果上述可以做到,是否也可以“不透明”文本背景?所以实际/主要背景是部分可见的,但保持文本“实心”。
我使用了不透明,但它使前景文本不透明(没有保持原样)。
最佳答案
这是我使用 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 - 现在可以使用背景图片。
这是适用于 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);
});
关于html - 仅文本而不是父 span/div/body 的 CSS 背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34975218/