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

新手上路,请多包涵

我想在我的标签中使用动态文本作为某些元素的背景。因此,我可以使用图像(动态文本)。我如何仅使用 CSS 或 JavaScript 来实现?

原文由 chustar 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 376
2 个回答

你可以在你的相对定位元素中有一个绝对定位的元素:

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

这是 一个例子

原文由 Paolo Bergantino 发布,翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Ciro Santilli OurBigBook.com 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏