Est-il possible d'utiliser le texte comme le fond avec du CSS?

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

InformationsquelleAutor chustar | 2009-07-28

Vous pouvez avoir une position absolue de l'élément à l'intérieur de votre parent positionné élément:

<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 un exemple de cela.

elementName:after { content: "\BB"; float: right; }

InformationsquelleAutor Paolo Bergantino

124

SVG texte image d'arrière-plan

CSS:
```
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>");
}
```
HTML:
```
<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 un retrait de la version de la CSS de sorte que vous puissiez mieux comprendre. Notez que cela ne fonctionne pas, vous devez utiliser le seul liner SVG à partir de l'extrait ci-dessus à la place:
```
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>");
}
```
Pas sûr de savoir comment portable c'est (fonctionne sur Firefox 31 et Chrome 36), et il est techniquement une image... mais la source est en ligne et en texte brut, et il évolue à l'infini.

@senectus trouvé qu'il fonctionne mieux sur IE si vous base64 encode: https://stackoverflow.com/a/25593531/895245
- Intéressant. J'ai seulement pu obtenir que cela fonctionne dans Firefox 31, mais pas Chrome 36 ou Safari 7.
- Vrai, même ici. Sur google Chrome 36 j'ai l'impression que le fond est là, mais sur très lettres minuscules. Peut-être que j'oublie de définir certains d'arrière-plan / SVG paramètre de taille?
- Ya, je suis en train d'expérimenter avec elle pour le moment... ressemble peut-être "viewBox"? Je suis toujours amusé avec elle.
- OK: manquant taille de la police était le problème: google Chrome, la valeur par défaut est minuscule. Semble fonctionner maintenant. Longue vie à réinitialise CSS!
- Ciro: d'après votre réponse, j'ai été capable de mettre cela ensemble... très bien fonctionné! Merci! codepen.io/jprichardson/stylo/GnxKr
- super réponse! Avez-vous des idées sur la façon d'améliorer le rendu sur Chrome? Il a l'air vraiment mauvais. Merci d'avance
- désolé, n'est-ce pas touché webdev en temps 🙂 Comment est-il mauvais? Ping-moi si vous trouvez quoi que ce soit.
- Il fonctionne! Il suffit de le copier à partir de l'extrait de code, pas de la cité de code. Pour une raison que l'on travaille pendant que l'autre pas.
InformationsquelleAutor Ciro Santilli 新疆改造中心法轮功六四事件
40

Il peut être possible (mais très hackish) avec uniquement du CSS en utilisant le :before ou :after éléments pseudo:

CSS:
```
.bgtext {
  position: relative;
}

.bgtext:after {
  content: "Background text";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
```
HTML:
```
<div class="bgtext">
  Foreground text
</div>
```
Cela semble fonctionner, mais vous aurez probablement besoin de ruser un peu. Notez également qu'il ne fonctionne pas dans IE6 car il ne prend pas en charge :after.
- Mise à jour: Comme pour l'instant, tous les navigateurs modernes soutien pseudo-éléments. Par exemple, c'est comment FontAwesome fonctionne pour CSS icônes (à l'aide d' :avant sur des éléments en ligne).
InformationsquelleAutor DisgruntledGoat
19

Ciro de la solution sur une SVG de Données URI arrière-plan contenant le texte est très intelligent.

Toutefois, il ne fonctionne pas sous IE, si vous venez d'ajouter de la plaine SVG source pour les données de l'URI.

Afin de contourner ce problème et de le faire fonctionner dans IE9 et jusqu', encoder le SVG en base64. C'est un outil formidable.

Donc:
```
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:
```
background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4=');
```
Testé et il fonctionne dans IE9-10-11, WebKit (Chrome 37, Opera 23) et Gecko (Firefox 31).

http://jsfiddle.net/qapp5dLn/
- C'est un meilleur outil: jpillora.com/base64-encoder simpile, pas d'erreurs, autofilling, à l'image de l'aperçu. Yep, c'est mieux à pas de géant.
InformationsquelleAutor senectus

@Ciro

Vous pouvez rompre le inline code svg 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é,

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 ==> l'utilisation dans NWjs & Electron garantie)

InformationsquelleAutor Athmailer

À l'aide de pure CSS:

(Mais l'utilisation de ce dans de rares occasions, parce que HTML méthode est le MOYEN PRIVILÉGIÉ).

CSS:

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

HTML:

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

InformationsquelleAutor T.Todua

2

Vous pourriez faire de l'élément contenant le bg de texte ont une baisse de l'ordre d'empilement ( z-index, position ) et peut-être même l'opacité. Si l'élément que vous avez besoin sur le dessus aurait besoin de plus de l'ordre d'empilement ( z-index:5; position:relative; par ex ) et de l'élément à l'origine aurait besoin de quelque chose de plus bas ( par défaut ou tout simplement une baisse du z-index, comme 3 et position:relative; ).

InformationsquelleAutor meder omuraliev

Vous devez vous connecter pour publier un commentaire.