有没有办法使用CSS作为背景使用文字？

Question

我想使用动态文本作为我的标记中某些元素的背景。正因为如此，我可以使用图像（动态文本）。我如何使用CSS或JavaScript做到这一点？

Answer 1

你可以有一个绝对定位的元素的相对定位的元素里面：

<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; 
} 

这里的an example of it。

Answer 2

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

Answer 3

它可以使用可能（但很hackish的）只有CSS的：before或：after伪元素：

<style type="text/css"> 
    .bgtext { 
    position: relative; 
    } 
    .bgtext:after { 
    content: "Background text"; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    } 
</style> 

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

这似乎是工作，但你可能需要调整它一点点。另外请注意，它不适用于IE6，因为它不支持:after。

Answer 4

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>"); 
} 

不知道如何：

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）的缩进版本这是可移植的（适用于Firefox 31和Chrome 36），它在技术上是一个图像......但源代码是内联和纯文本，并且可以无限扩展。

@senectus发现，它的作品更好的IE浏览器，如果你Base64编码它：https://stackoverflow.com/a/25593531/895245

Answer 5

西罗的大约包含文本的SVG数据URI背景的解决方案是非常聪明的。

但是，如果您只是将普通的SVG源添加到数据URI，它将无法在IE中使用。

为了解决这个问题并使其在IE9及更高版本中工作，请将SVG编码为base64。 This is a great tool.

所以这个：

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的（铬37，歌剧23）和蛤蚧（火狐31）的作品。

http://jsfiddle.net/qapp5dLn/

Answer 6

@Ciro

你可以用下面的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>"); 
} 

我测试反斜杠"\"

打破联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 &火狐50 ==>使用情况NWjs &电子保证的广告）

Answer 7

使用纯CSS：

（但是，在极少数情况下使用，因为HTML方法这是非常好的选择）。

.container{ 
 
\t position:relative; 
 
} 
 
.container::before{ 
 
\t content:""; 
 
\t width: 100%; height: 100%; position: absolute; background: black; opacity: 0.3; z-index: 1; top: 0; left: 0; 
 
\t background: black; 
 
} 
 
.container::after{ 
 
\t 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; 
 
\t animation-name: blinking; 
 
\t animation-duration: 1s; 
 
\t animation-iteration-count: infinite; 
 
\t animation-direction: alternate; 
 
} 
 
@keyframes blinking { 
 
\t 0% {opacity: 0;} 
 
\t 100% {opacity: 1;} 
 
}

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