有没有一种方法可以使用文本作为 CSS 的背景？

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

214691 次浏览
小开
最佳答案

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

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

这是 一个例子。

小开

您可以使包含 bg 文本的元素具有较低的堆叠顺序(z-index，position) ，甚至可以设置不透明度。所以你需要在顶部的元素需要一个更高的堆叠顺序(z-index: 5; position: relant; for ex) ，后面的元素需要一个更低的值(默认值或者只需要一个更低的 z-index，比如3和 position: relant;)。

小开

只使用 CSS 使用: before 或: after 伪元素也许是可能的(但非常骇客) :

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

小开

SVG text background image

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 关于包含文本的 SVG Data URI 背景的解决方案非常聪明。

但是，如果只是将普通的 SVG 源添加到数据 URI 中，那么在 IE 中就无法工作。

为了解决这个问题并使其在 IE9及以上版本中工作，请将 SVG 编码为 base64.This is a great tool.

所以这个:

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)中工作。

http://jsfiddle.net/qapp5dLn/

小开

@ Ciro

可以使用反斜杠 "\"破译内联 svg 代码

使用以下代码在 Chrome54和 Firefox50中进行测试

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 保证)

小开

Using pure CSS:

(但是在少数情况下使用这个，因为 HTML 方法是首选的方式)。

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

小开

我希望这能帮到你

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

小开

一个简单的解决办法:

    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>

You do not really need to set "position:relative" for the container, except you need to setup relative position for background.

小开

在这篇文章中，我找到了一个如何在 div 容器的背景中添加文本的想法，这就是我使用两个 Flex 容器想到的解决方案。

.foreground {
display: flex;
background-color: #f7fcfc;
justify-content: center;
align-content: center;
border-radius: 3px;
border: 2px solid #86cdb6;
margin: 1em;
width: 100px;
height: 100px;
}


.foreground p {
font-family: sans-serif;
font-size: 12px;
font-weight: 900;
color: #86cdb6;
margin: auto;
text-align: center;
z-index: 2;
}


.background {
position: absolute;
display: flex;
align-content: center;
justify-content: center;
width: inherit;
height: inherit;
z-index: 1;
overflow: hidden;
}


.background p {
font-family: sans-serif;
font-size: 22px;
font-weight: 400;
color: #ddf1ef;
text-align: center;
margin: auto;
}
<div class="foreground">
<div class="background">
<p>Background
<br> Background
<br> Background
<br> Background
</p>
</div>
<p>Foreground</p>
</div>

小开

我用过这个密码。

   const StepIcon = ({ label, description }) => (
<div>
<span className='step-icon' style=\{\{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<CircleOutlinedIcon />
<div style=\{\{ position: 'absolute', fontSize: 10 }}>{label}</div>
</span>
<div>{description}</div>
</div>
);


<Stepper activeStep={0} alternativeLabel>
{stepperSteps.map((label, index) => (
<Step key={label}
sx=\{\{
'& .MuiStepLabel-root .MuiSvgIcon-root': {
color: theme.palette.primary.main, // circle color (ACTIVE)
borderWidth: 1
}
}}
>
<StepButton icon={<StepIcon label={index + 1} description={label} />} />
</Step>
))}
</Stepper>

提交答案