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

Question

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

Answer 1

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