Html 有没有办法使用文本作为 CSS 的背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1191464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to use use text as the background with CSS?
提问by chustar
I would like to use dynamic text as background of certain elements in my tag. Because of this, I can use images (dynamic text). How do I do it with just CSS or JavaScript?
我想使用动态文本作为标签中某些元素的背景。因此，我可以使用图像（动态文本）。如何仅使用 CSS 或 JavaScript 来实现？
采纳答案by Paolo Bergantino
You can have an absolutely positioned element inside of your relative positioned element:
您可以在相对定位的元素内有一个绝对定位的元素：
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>
And then the CSS:
然后是 CSS：
#container {
position: relative;
}
#background {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
Here's an example of it.
这是一个例子。
回答by DisgruntledGoat
It may be possible (but very hackish) with only CSS using the :before or :after pseudo elements:
仅使用 :before 或 :after 伪元素的 CSS 可能（但非常hackish）：
.bgtext {
position: relative;
}
.bgtext:after {
content: "Background text";
position: absolute;
top: 0;
left: 0;
z-index: -1;
}<div class="bgtext">
Foreground text
</div>This seems to work, but you'll probably need to tweak it a little. Also note it won't work in IE6 because it doesn't support :after.
这似乎有效，但您可能需要稍微调整一下。另请注意，它在 IE6 中不起作用，因为它不支持:after.
回答by senectus
Ciro's solution about an SVG Data URI background containing the text is very clever.
Ciro 关于包含文本的 SVG 数据 URI 背景的解决方案非常聪明。
However, it won't work in IE if you just add the plain SVG source to the data URI.
但是，如果您只是将纯 SVG 源添加到数据 URI，它将无法在 IE 中工作。
In order to get around this and make it work in IE9 and up, encode the SVG to base64. This is a great tool.
为了解决这个问题并使其在 IE9 及更高版本中工作，请将 SVG 编码为 base64。这是一个很棒的工具。
So this:
所以这：
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>');
Becomes this:
变成这样：
background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4=');
Tested and it works in IE9-10-11, WebKit (Chrome 37, Opera 23) and Gecko (Firefox 31).
经过测试，它适用于 IE9-10-11、WebKit（Chrome 37、Opera 23）和 Gecko（Firefox 31）。
回答by Athmailer
@Ciro
@Ciro
You can break the inline svg code with back-slash "\"
您可以使用反斜杠打破内联 svg 代码 "\"
Tested with the code below in Chrome 54 and Firefox 50
在 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>");
}
I even Tested this,
我什至测试过这个，
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>\
");
and it works (at least in Chrome 54 & Firefox 50 ==> usage in NWjs & Electron guarenteed)
它有效（至少在 Chrome 54 和 Firefox 50 ==> NWjs 和 Electron 中的使用有保证）
回答by T.Todua
Using pure CSS:
使用纯 CSS：
(But use this in rare occasions, because HTML method is PREFERRED WAY).
（但在极少数情况下使用它，因为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>回答by meder omuraliev
You could make the element containing the bg text have a lower stacking order ( z-index, position ) and possibly even set opacity. So the element you need on top would need a higher stacking order ( z-index:5; position:relative; for ex ) and the element behind would need something lower ( default or just a lower z-index like 3 and position:relative; ).
您可以使包含 bg 文本的元素具有较低的堆叠顺序（ z-index, position ），甚至可能设置不透明度。所以你需要在顶部的元素需要更高的堆叠顺序（ z-index:5; position:relative; for ex ）而后面的元素需要更低的东西（默认或只是一个较低的 z-index 像 3 和 position:relative ;)
