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

这似乎有效,但你可能需要稍微调整一下.另请注意,它不适用于IE6,因为它不支持:after.

Ciro关于包含文本的SVG数据URI背景的解决方案非常聪明.

但是,如果只是将普通SVG源添加到数据URI,它将无法在IE中运行.

为了解决这个问题并使其在IE9及更高版本中运行,请将SVG编码为base64.这是一个很棒的工具.

所以这:

background:url('data:image/svg+xml;utf8,');

变成这样:

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代码 "\"

在Chrome 54和Firefox 50中使用以下代码进行了测试

body {
    background: transparent;
    background-attachment:fixed;
    background-image: url(
    "data:image/svg+xml;utf8,");
}

我什至测试过

background-image: url("\
data:image/svg+xml;utf8, \
  \
");

并且有效（至少在Chrome 54和Firefox 50 ==>保证在NWjs和Electron中使用）

（但是在极少数情况下可以使用它，因为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;}
}

here is main content, text , 
 images and other page details