タグ内の特定の要素の背景としてダイナミックテキストを使用したいと思います。そのため、画像（ダイナミックテキスト）を使用できます。CSSまたはJavaScriptだけでどうすればよいですか？
回答:
相対配置要素内に絶対配置要素を含めることができます。
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>そして、CSS：
#container {
position: relative;
}
#background {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}以下はその例です。
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
：beforeまたは：after疑似要素を使用するCSSのみで可能です（ただし、非常にハック）。
.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。
テキストを含むSVGデータURIの背景に関するCiroの解決策は非常に巧妙です。
ただし、単純な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）で動作します。
@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での使用が保証されています）
（ただし、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>