有没有办法在CSS中使用文本作为背景？

Question 1

我想将动态文本用作标签中某些元素的背景。因此，我可以使用图像（动态文本）。我该如何仅使用CSS或JavaScript？

Question 2

您可以在相对定位的元素内有一个绝对定位的元素：

<div id="container">
    <div id="background">
    Text to have as background
    </div>
    Normal contents
</div>

然后是CSS：

#container {
   position: relative;
}

#background {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}

这是一个例子。

Question 3

SVG文字背景图片

body {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='red' font-size='20'>I love SVG!</text></svg>");
}

<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p>
<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p>

展开摘要

这是CSS的缩进版本，因此您可以更好地理解。请注意，这是行不通的，您需要改用上面摘录中的单线SVG：

body {
  background-image:url("data:image/svg+xml;utf8,
  <svg xmlns='http://www.w3.org/2000/svg' version='1.1'
       height='50px' width='120px'>
    <text x='0' y='15' fill='red' font-size='20'>I love SVG!</text>
  </svg>");
}

不确定它的可移植性（在Firefox 31和Chrome 36上工作），从技术上讲它是图像...但是源是内联和纯文本，并且可以无限扩展。

@senectus发现，如果对base64进行编码，它在IE上会更好：https：//stackoverflow.com/a/25593531/895245

Question 4

仅使用CSS的：before或：after伪元素可能有（但很hackus）：

.bgtext {
  position: relative;
}

.bgtext:after {
  content: "Background text";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

<div class="bgtext">
  Foreground text
</div>

展开摘要

这似乎可行，但是您可能需要稍微调整一下。另请注意，它不支持IE6中的工作:after。

Question 5

Ciro关于包含文本的SVG Data URI背景的解决方案非常聪明。

但是，如果仅将纯SVG源添加到数据URI，则它在IE中将不起作用。

为了解决此问题并使它在IE9及更高版本中工作，请将SVG编码为base64。这是一个很棒的工具。

所以这：

background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text x="5%" y="5%" font-size="30" fill="red">I love SVG!</text></svg>');

变成这个：

background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4=');

经过测试，可以在IE9-10-11，WebKit（Chrome 37，Opera 23）和Gecko（Firefox 31）中使用。

http://jsfiddle.net/qapp5dLn/

Question 6

@Ciro

您可以使用反斜杠来破坏嵌入式svg代码 "\"

在Chrome 54和Firefox 50中使用以下代码进行了测试

body {
    background: transparent;
    background-attachment:fixed;
    background-image: url(
    "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'> \
    <rect x='0' y='0' width='170' height='50' style='stroke:white; fill:gray; stroke-opacity: 0.3; stroke-width: 3px; fill-opacity: 0.7; stroke-dasharray: 10 5; stroke-linecap=round; '/> \
    <text x='85' y='30' style='fill:lightBlue; text-anchor: middle' font-size='16' transform='rotate(10,85,25)'>I love SVG!</text></svg>");
}

我什至测试过

background-image: url("\
data:image/svg+xml;utf8, \
  <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'> \
    <rect x='0' y='0' width='170' height='50'\
      style='stroke:white; stroke-width: 3px; stroke-opacity: 0.3; \
             stroke-dasharray: 10 5; stroke-linecap=round; \
             fill:gray;  fill-opacity: 0.7; '/> \
    <text x='85' y='30' \
      style='fill:lightBlue; text-anchor: middle' font-size='16' \
      transform='rotate(10,85,25)'> \
      I love SVG! \
    </text> \
  </svg>\
");

并且有效（至少在Chrome 54和Firefox 50 ==>保证在NWjs和Electron中使用）

Question 7

使用纯CSS：

（但是在极少数情况下可以使用它，因为HTML方法是PREFERRED WAY）。

.container{
	position:relative;
}
.container::before{ 
	content:"";
	width: 100%; height: 100%; position: absolute; background: black; opacity: 0.3; z-index: 1;  top: 0;   left: 0;
	background: black;
}
.container::after{ 
	content: "Your Text"; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; overflow: hidden; font-size: 2em; color: red;    text-align: center; text-shadow: 0px 0px 5px black; background: #0a0a0a8c; padding: 5px;
	animation-name: blinking;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

<div class="container">here is main content, text , <br/> images and other page details</div>

展开摘要

Question 8

您可以使包含bg文本的元素具有较低的堆叠顺序（z-index，position），甚至可以设置不透明度。因此，您需要在顶部的元素将需要更高的堆叠顺序（z-index：5; position：relative;对于ex），而后面的元素将需要更低的堆叠顺序（默认值或仅需要更低的z-index，例如3和position：relative ;）。