logo标签列表

有没有一种方法可以使用CSS将文本作为背景？

htmlcssbackground
130

我想要在我的标签中使用动态文本作为某些元素的背景。由于这个原因，我不能使用图片（而是使用动态文本）。我该如何只使用CSS或JavaScript实现这个效果？

11个回答
185

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://dev59.com/6nM_5IYBdhLWcg3w3nRs#25593531

有趣。我只能在Firefox 31中使其工作，但无法在Chrome 36或Safari 7中使用。 - JP Richardson
@JPRichardson 是的，我也是这样。在Chrome 36上，我有这样的印象，即背景存在，但字体非常小。也许我忘记设置一些背景/SVG大小参数了？ - Ciro Santilli OurBigBook.com
是的，我目前正在尝试...看起来可能是"viewBox"? 我还在研究它。 - JP Richardson
1
Ciro：根据你的回答，我得以将这个东西组合起来……效果还不错！谢谢！http://codepen.io/jprichardson/pen/GnxKr - JP Richardson
@AlejandroIglesias 抱歉，我有一段时间没有碰过Web开发 :-) 它看起来怎么不好？如果你找到了任何问题，请跟我联系。 - Ciro Santilli OurBigBook.com
显示剩余2条评论
94

你可以在相对定位元素内部放置一个绝对定位元素：

#container {
   position: relative;
}

#background {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}
<div id="container">
    <div id="background">
    Text to have as background
    </div>
    Normal contents
</div>

这里有一个示例。

58

仅使用CSS的:before或:after伪元素可能是可能的（但非常hackish）：

.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，所以它无法在该浏览器中工作。

更新：目前，所有现代浏览器都支持伪元素。例如，这就是FontAwesome在CSS图标上的工作方式（在内联元素上使用:before）。 - Cédric Françoys
请注意，Firefox 不允许在不能包含内部内容的元素（如输入字段）上使用 :before 和 :after。这符合官方的 CSS 规范。 - nicbou
23

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/

1
这是一个更好的工具：https://jpillora.com/base64-encoder/ 简单易用，无错误，自动填充，图像预览。没错，它比其他工具更加出色。 - Jack G
11

@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中使用是有保证的）

11

使用纯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
我希望这能对你有所帮助。 

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

2
你可以将包含背景文本的元素设置为较低的堆叠顺序（z-index，position），甚至可能设置不透明度。因此，你需要置于顶部的元素需要更高的堆叠顺序（例如：z-index:5; position:relative;），而在其后面的元素则需要较低的堆叠顺序（默认或只是较低的z-index，如3和position:relative;）。
1
一个简单的解决方案： 

    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>

除非你需要为背景设置相对位置，否则你实际上不需要为容器设置"position:relative"。

1

我看到这篇文章是为了想要在div容器的背景上添加文本，这是我使用两个flex容器想出来的解决方案。

.foreground {
  display: flex;
  background-color: #f7fcfc;
  justify-content: center;
  align-content: center;
  border-radius: 3px;
  border: 2px solid #86cdb6;
  margin: 1em;
  width: 100px;
  height: 100px;
}

.foreground p {
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 900;
  color: #86cdb6;
  margin: auto;
  text-align: center;
  z-index: 2;
}

.background {
  position: absolute;
  display: flex;
  align-content: center;
  justify-content: center;
  width: inherit;
  height: inherit;
  z-index: 1;
  overflow: hidden;
}

.background p {
  font-family: sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #ddf1ef;
  text-align: center;
  margin: auto;
}
<div class="foreground">
  <div class="background">
    <p>Background
      <br> Background
      <br> Background
      <br> Background
    </p>
  </div>
  <p>Foreground</p>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接