Existe-t-il un moyen d'utiliser du texte comme arrière-plan avec CSS?

Question

Je voudrais utiliser du texte dynamique comme arrière-plan de certains éléments de mon tag. Pour cette raison, je peux utiliser des images (texte dynamique). Comment faire avec CSS ou JavaScript?

Answer 1

Vous pouvez avoir un élément tout à fait disposé à l'intérieur de votre élément positionné par rapport:

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

Et puis le CSS:

#container { 
    position: relative; 
} 

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

est ici an example of it.

Answer 2

Vous pouvez faire en sorte que l'élément contenant le texte bg ait un ordre d'empilement inférieur (index-z, position) et éventuellement même une opacité définie. Donc l'élément dont vous avez besoin en haut aurait besoin d'un ordre d'empilement plus élevé (z-index: 5; position: relative; ex) et l'élément derrière aurait besoin de quelque chose de plus bas (par défaut ou juste un z-index inférieur comme 3 ;).

Answer 3

Il peut être possible (mais très hackish) avec seulement CSS en utilisant l': avant ou: après des éléments 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> 

Cela semble fonctionner, mais vous aurez probablement besoin de ruser un peu. Notez également qu'il ne fonctionnera pas dans IE6 car il ne prend pas en charge :after.

Answer 4

Que diriez-vous d'un SVG text background image?

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>

la version indenté de CSS afin que vous puissiez mieux comprendre (cela ne pas travail, vous devez utiliser le SVG unique liner):

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

Je ne sais pas comment portable c'est (fonctionne sur Firefox 31 et Chrome 36), et c'est techniquement une image ... mais la source est en ligne et en texte brut, et elle évolue à l'infini.

@senectus a constaté que cela fonctionne mieux sur IE si vous base64 encoder: https://stackoverflow.com/a/25593531/895245

Answer 5

solution de Ciro au sujet d'un arrière-plan URI données SVG contenant le texte est très intelligent. Cependant, cela ne fonctionnera pas dans IE si vous ajoutez simplement la source SVG ordinaire à l'URI de données. Pour contourner cela et le faire fonctionner dans IE9 et plus, encoder le SVG en base64. This is a great tool.

donc ceci:

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

Devient ceci:

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

et qu'il fonctionne dans IE9-10-11, WebKit (Chrome 37, Opera 23) et Gecko (Firefox 31) .

http://jsfiddle.net/qapp5dLn/

Answer 6

@Ciro

Vous pouvez casser le code svg en ligne avec barre oblique inverse "\"

Testé avec le code ci-dessous dans Chrome 54 et 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 même Testé ceci,

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

et il fonctionne (au moins dans Chrome 54 & Firefox 50 ==> Utilisation dans NWjs & Electron guarenteed)

Answer 7

L'utilisation de CSS pur:

(Cependant, l'utiliser dans de rares occasions, parce que la méthode HTML est beaucoup PREFERRED WAY alors ceci).

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