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

Question

Je voudrais utiliser du texte dynamique comme arrière-plan de certains éléments dans ma balise. Pour cela, je peux utiliser des images (texte dynamique). Comment puis-je le faire avec seulement CSS ou JavaScript ?

Answer 1

Image de fond du texte 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>

Voici une version en retrait de la CSS pour que vous puissiez mieux comprendre. Notez que cela ne fonctionne pas vous devez utiliser le SVG à une seule ligne de l'extrait ci-dessus :

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 suis pas sûr de la portabilité de cette application (elle 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 s'adapte à l'infini.

@senectus a découvert qu'il fonctionne mieux sur IE si vous l'encodez en base64 : https://stackoverflow.com/a/25593531/895245

Answer 2

Vous pouvez avoir un élément positionné de manière absolue à l'intérieur de votre élément positionné de manière relative :

#container {
   position: relative;
}

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

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

Voici un exemple .

Answer 3

C'est peut-être possible (mais c'est très compliqué) avec uniquement du CSS en utilisant les pseudo-éléments :before ou :after :

.bgtext {
  position: relative;
}

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

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

Cela semble fonctionner, mais vous devrez probablement le modifier un peu. Notez également qu'il ne fonctionnera pas dans IE6, car il ne prend pas en charge les éléments suivants :after .

Answer 4

La solution de Ciro concernant un fond SVG Data URI contenant le texte est très intelligente.

Cependant, cela ne fonctionnera pas dans IE si vous ajoutez simplement la source SVG simple à l'URI des données.

Pour contourner ce problème et faire en sorte que cela fonctionne dans IE9 et les versions ultérieures, encodez le SVG en base64. C'est un outil formidable.

Alors ça :

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

Testé et cela fonctionne dans IE9-10-11, WebKit (Chrome 37, Opera 23) et Gecko (Firefox 31).

http://jsfiddle.net/qapp5dLn/

Answer 5

@Ciro

Vous pouvez interrompre le code svg en ligne avec des barres obliques inversées. "\"

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

Je l'ai même testé,

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 cela fonctionne (au moins dans Chrome 54 & Firefox 50 ==> utilisation dans NWjs & Electron garantie)