我想使用动态文本作为标签中某些元素的背景。因此，我可以使用图像（动态文本）。如何仅使用 CSS 或 JavaScript 来完成？
问问题
202526 次
9 回答
168
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
于 2014-08-27T20:54:57.610 回答
93
您可以在相对定位的元素内有一个绝对定位的元素：
#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>这是一个例子。
于 2009-07-28T01:20:05.400 回答
54
仅使用 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.
于 2009-07-28T01:37:59.560 回答
22
Ciro 关于包含文本的 SVG 数据 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) 中运行。
于 2014-08-31T15:34:43.660 回答
10
@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 中的使用保证）
于 2016-11-27T22:49:44.237 回答
8
使用纯 CSS：
（但在极少数情况下使用它，因为HTML 方法是 PREFERRED WAY）。
.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>于 2018-01-19T21:22:34.120 回答
4
我希望这可以帮助你
<!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>于 2020-10-06T06:29:04.623 回答
2
您可以使包含 bg 文本的元素具有较低的堆叠顺序（ z-index, position ），甚至可能设置不透明度。因此，您需要在顶部的元素需要更高的堆叠顺序（ z-index:5; position:relative; for ex ），而后面的元素需要更低的（默认或只是像 3 和 position:relative 这样的较低 z-index ; )。
于 2009-07-28T01:20:24.713 回答
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>您实际上不需要为容器设置“位置：相对”，除非您需要为背景设置相对位置。
于 2021-05-13T08:25:17.950 回答