Ich möchte dynamischen Text als Hintergrund für bestimmte Elemente in meinem Tag verwenden. Aus diesem Grund kann ich Bilder (dynamischer Text) verwenden. Wie mache ich das nur mit CSS oder JavaScript?

Sie können ein absolut positioniertes Element in Ihrem relativ positionierten Element haben:

<div id="container">
    <div id="background">
    Text to have as background
    </div>
    Normal contents
</div>

Und dann das CSS:

#container {
   position: relative;
}

#background {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
   overflow: hidden;
}

Hier ist ein Beispiel dafür .

SVG Text Hintergrundbild

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>

Hier ist eine eingerückte Version des CSS, damit Sie es besser verstehen können. Beachten Sie, dass dies nicht funktioniert . Sie müssen stattdessen das Single-Liner-SVG aus dem obigen Snippet verwenden:

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>");
}

Ich bin mir nicht sicher, wie portabel dies ist (funktioniert unter Firefox 31 und Chrome 36), und es ist technisch gesehen ein Bild ... aber die Quelle ist Inline- und Nur-Text und es ist unendlich skalierbar.

@senectus hat festgestellt, dass es im IE besser funktioniert, wenn Sie Base64 codieren: https://stackoverflow.com/a/25593531/895245

Es kann möglich (aber sehr hackisch) sein, nur CSS zu verwenden, indem: vor oder: nach Pseudoelementen verwendet wird:

.bgtext {
  position: relative;
}

.bgtext:after {
  content: "Background text";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

<div class="bgtext">
  Foreground text
</div>

Dies scheint zu funktionieren, aber Sie müssen es wahrscheinlich ein wenig optimieren. Beachten Sie auch, dass es in IE6 nicht funktioniert, da es nicht unterstützt wird :after.

Ciros Lösung für einen SVG-Daten-URI-Hintergrund, der den Text enthält, ist sehr clever.

Im IE funktioniert dies jedoch nicht, wenn Sie nur die einfache SVG-Quelle zum Daten-URI hinzufügen.

Codieren Sie das SVG in base64, um dies zu umgehen und es in IE9 und höher zum Laufen zu bringen. Dies ist ein großartiges Werkzeug.

Also das:

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>');

Wird dies:

background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4=');

Getestet und funktioniert in IE9-10-11, WebKit (Chrome 37, Opera 23) und Gecko (Firefox 31).

http://jsfiddle.net/qapp5dLn/

@Ciro

Sie können den Inline-SVG-Code mit einem Schrägstrich unterbrechen "\"

Getestet mit dem folgenden Code in Chrome 54 und 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>");
}

Ich habe das sogar getestet,

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>\
");

und es funktioniert (zumindest in Chrome 54 & Firefox 50 ==> Verwendung in NWjs & Electron garantiert)

Verwenden von reinem CSS:

(Verwenden Sie dies jedoch in seltenen Fällen, da die HTML-Methode BEVORZUGT ist. )

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

Sie können dafür sorgen, dass das Element, das den BG-Text enthält, eine niedrigere Stapelreihenfolge (Z-Index, Position) aufweist und möglicherweise sogar die Deckkraft festlegt. Das Element, das Sie oben benötigen, benötigt also eine höhere Stapelreihenfolge (Z-Index: 5; Position: relativ; zum Beispiel) und das Element dahinter benötigt etwas Niedrigeres (Standard oder nur einen niedrigeren Z-Index wie 3 und Position: Relativ) ;).