我想使用动态文本作为标签中某些元素的背景。因此，我可以使用图像（动态文本）。如何仅使用 CSS 或 JavaScript 来做到这一点？
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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
