web-dev-qa-db-fra.com

Est-il possible d'utiliser le texte comme arrière-plan avec CSS?

J'aimerais utiliser du texte dynamique comme arrière-plan de certains éléments de ma balise. Pour cette raison, je peux utiliser des images (texte dynamique). Comment puis-je le faire avec CSS ou JavaScript?

htmlcssbackground
78
chustar

Vous pouvez avoir un élément absolument positionné à l'intérieur de votre élément relatif:

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

Voici n exemple .

75
Paolo Bergantino

Image d'arrière-plan de 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 du CSS pour que vous puissiez mieux comprendre. Notez que cela ne fonctionne pas , vous devez utiliser le SVG à une 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>");
}

Vous ne savez pas à quel point c'est portable (fonctionne sur Firefox 31 et Chrome 36)], et c'est techniquement une image ... mais la source est en texte brut et en ligne, et l'échelle est infinie.

@senectus a constaté que cela fonctionnait mieux sur IE si vous le codiez en base64: https://stackoverflow.com/a/25593531/895245

117
Ciro Santilli 新疆改造中心996ICU六四事件

Cela peut être possible (mais très compliqué) avec seulement CSS 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 que cela ne fonctionnera pas dans IE6 car il ne supporte pas :after.

40
DisgruntledGoat

La solution de Ciro concernant un arrière-plan URI de données SVG contenant le texte est très astucieuse.

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

Afin de contourner cela et de le faire fonctionner dans IE9 et supérieur, encodez le SVG en base64. Ceci est un excellent outil.

Donc ç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/

19
senectus

@Ciro

Vous pouvez casser le code svg en ligne avec back-slash "\"

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

J'ai même testé cela,

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 ==> dans NWjs & Electron garantie])

7
Athmailer

Utilisation de CSS pur:

(Mais utilisez-le dans de rares occasions, car la méthode HTML est la méthode privilégiée).

.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

Vous pouvez faire en sorte que l’élément contenant le texte bg ait un ordre d’empilement inférieur (z-index, position) et éventuellement même définir l’opacité. Ainsi, l'élément dont vous avez besoin en haut nécessite un ordre d'empilement plus élevé (z-index: 5; position: relative; par exemple) et l'élément derrière nécessite quelque chose de inférieur (par défaut ou simplement un indice z inférieur, comme 3 et position: relative ;).

2
meder omuraliev