Ah, une #CSS que je ne connaissais pas : appliquer une image de fond au texte lui-même. Je suis tombé dessus sur les nouvelles pages de chez Apple :
On voit que le paragraphe de texte a une texture orangée. Celle-ci est attribuée avec un très classique background
:
background-image: url(https://seenthis.net/"/v/iphone-xs/a/images/overview/copy_texture_1_large.jpg");
L’astuce pour que ce fond ne s’applique aux caractères du texte, c’est cette CSS :
-webkit-background-clip: text;
color: transparent !important;
La CSS #background-clip indique que l’image de fond devra s’appliquer uniquement au texte, et la seconde ligne force la couleur du texte à
transparent
, de façon à laisser apparaître l’image de fond.D’après CanIUse :
▻https://caniuse.com/#search=background-clip
Firefox, Chrome and Safari support the unofficial -webkit-background-clip: text (only with prefix)
Du coup, c’est plutôt assez largement répandu.
Le hic, malheureusement, c’est que ça se dégrade particulièrement mal quand background-clip
n’est pas interprété :
Je ne vois pas d’autre solution qu’un test Javascript, du coup, beurk (à moins que quelqu’un ait une meilleure solution).