C'è un modo per usare il testo come sfondo con i CSS?

Question

Vorrei utilizzare il testo dinamico come sfondo di determinati elementi nel mio tag. Per questo motivo, posso usare le immagini (testo dinamico). Come faccio con solo CSS o JavaScript?

Answer 1

si può avere un elemento assolutamente posizionati all'interno del vostro elemento posizionato relativa:

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

E poi il CSS:

#container { 
    position: relative; 
} 

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

Ecco an example of it.

Answer 2

È possibile rendere l'elemento contenente il testo bg un ordine di sovrapposizione inferiore (z-index, posizione) ed eventualmente anche impostare l'opacità. Quindi l'elemento di cui hai bisogno in cima avrebbe bisogno di un ordine di stack più alto (z-index: 5; position: relativo; per ex) e l'elemento dietro avrebbe bisogno di qualcosa di più basso (default o solo un indice z più basso come 3 e posizione: relativo ;).

Answer 3

Potrebbe essere possibile (ma molto hacker) solo con i CSS utilizzando il: prima o: dopo elementi pseudo:

<style type="text/css"> 
    .bgtext { 
    position: relative; 
    } 
    .bgtext:after { 
    content: "Background text"; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    } 
</style> 

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

Questo sembra funzionare, ma probabilmente bisogno di modificarlo un po '. Si noti inoltre che non funzionerà in IE6 perché non supporta .

Answer 4

Che ne dici di un'immagine di sfondo del testo 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>

versione rientrato di CSS in modo da poter capire meglio (questo non non lavoro, è necessario utilizzare il singolo rivestimento 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>"); 
} 

Non sai come questo è portatile (funziona su Firefox 31 e Chrome 36), ed è tecnicamente un'immagine ... ma la fonte è in linea e in testo semplice, e scala in modo infinito.

@senectus scoperto che funziona meglio su IE se si base64 codificare: https://stackoverflow.com/a/25593531/895245

Answer 5

soluzione di Ciro su uno sfondo SVG dati URI che contiene il testo è molto intelligente.

Tuttavia, non funzionerà in IE se si aggiunge semplicemente la sorgente SVG semplice all'URI dei dati.

Per aggirare questo problema e farlo funzionare in IE9 e versioni successive, codificare SVG in base64. This is a great tool.

Quindi questo:

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

Diventa questo:

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

Testato e funziona in IE9-10-11, WebKit (Chrome 37, Opera 23) e Gecko (Firefox 31) .

http://jsfiddle.net/qapp5dLn/

Answer 6

@Ciro

Si può rompere il codice inline svg con back-slash "\"

Testato con il codice qui sotto in Chrome 54 e 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>"); 
} 

I anche Testato,

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

e funziona (almeno in Chrome 54 & Firefox 50 ==> Utilizzo in NWjs & Electron guarenteed)

Answer 7

Utilizzando CSS puro:

(Tuttavia, utilizzare questo in rare occasioni, perché il metodo HTML è molto PREFERITO quindi questo).

.container{ 
 
\t position:relative; 
 
} 
 
.container::before{ 
 
\t content:""; 
 
\t width: 100%; height: 100%; position: absolute; background: black; opacity: 0.3; z-index: 1; top: 0; left: 0; 
 
\t background: black; 
 
} 
 
.container::after{ 
 
\t 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; 
 
\t animation-name: blinking; 
 
\t animation-duration: 1s; 
 
\t animation-iteration-count: infinite; 
 
\t animation-direction: alternate; 
 
} 
 
@keyframes blinking { 
 
\t 0% {opacity: 0;} 
 
\t 100% {opacity: 1;} 
 
}

<div class="container">here is main content, text , <br/> images and other page details</div>