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

时间：2009-07-28 01:17:02

标签： html css background

我想使用动态文本作为标记中某些元素的背景。因此，我可以使用图像（动态文本）。我怎么用CSS或JavaScript来做？

9 个答案:

答案 0 :(得分：108)

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

答案 1 :(得分：72)

您可以在相对定位元素中包含一个绝对定位的元素：

<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。

答案 2 :(得分：37)

有可能（但非常hackish）只使用CSS：before或：after伪元素：

.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。

答案 3 :(得分：19)

Ciro关于包含文本的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（Chrome 37，Opera 23）和Gecko（Firefox 31）。

http://jsfiddle.net/qapp5dLn/

答案 4 :(得分：7)

@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 ==＆gt; NWjs＆amp; Electron guarenteed中使用）

答案 5 :(得分：4)

使用纯CSS：

（但在极少数情况下使用此功能，因为 HTML方法是首选方式）。

.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>

答案 6 :(得分：3)

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

答案 7 :(得分：0)

我希望这会对您有所帮助

<!DOCTYPE html>
<html>
<head>
<style>

 :root:after { 
         
            content: "Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark   Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark "; 
            position: fixed; 
            transform: rotate(300deg); 
            -webkit-transform: rotate(300deg); 
            color: rgb(187, 182, 182); 
            top:0;                     
            z-index: -1; 
        } 
</style>
</head>
<body>
<p>hey my name is JHM</p>
</body>
</html>

答案 8 :(得分：0)

一个简单的解决方案：

    background-text{
        font-size:30px;
        font-weight:900;
        color:#f1f1f1;
        position:absolute;
        z-index:-1;
    }
<div id="container">
<background-text> This is background</background-text>
This if foreground text
</div>

您实际上不需要为容器设置“位置：相对”，除非您需要为背景设置相对位置。

相关问题
最新问题