wake-up-neo.com

Gibt es eine Möglichkeit, Text als Hintergrund für CSS zu verwenden?

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?

78
chustar

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 .

75

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 die SVG-Datei für einzelne Zeilen 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 das ist (funktioniert in 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 auf IE) besser funktioniert, wenn Sie base64 codieren: https://stackoverflow.com/a/25593531/895245

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

.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 :after Nicht unterstützt.

40
DisgruntledGoat

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

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

Um dies zu umgehen und es in IE9 und höher zum Laufen zu bringen, codieren Sie die SVG in base64. 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/

19
senectus

@Ciro

Sie können den Inline-Svg-Code mit einem Back-Slash "\" Unterbrechen.

Getestet mit dem Code unten 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)

7
Athmailer

Verwenden von reinem CSS:

(Verwenden Sie dies jedoch in seltenen Fällen, da HTML-Methode ist 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>
5
T.Todua

Sie könnten dafür sorgen, dass das Element, das den Hintergrundtext 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) ;).

2
meder omuraliev