Appliquer un masque d'image sur du texte en utilisant CSS

Question

Je souhaite masquer un texte d'ancrage de taille 4.5em avec une image répétée, de sorte que l'image ne s'affiche que sur la région où le texte est présent. Est-il possible que je peux le faire avec CSS? S'il vous plaît aider avec le code et l'exemple pertinent, si possible. Merci. :)

Answer 1

Je ne sais pas pourquoi vous avez obtenu le vote à la baisse, semble être une question légitime pour moi. Cela aurait pu être un peu plus descriptif cependant.

De toute façon, je pense que vous n'avez pas de chance! La seule façon d'y parvenir en CSS consiste à utiliser la propriété image-mask. C'est vraiment facile, mais le navigateur est assez médiocre pour le moment. pense que cela fonctionne bien dans Firefox, Opera et Google Chrome. Aucun support IE pour le moment. Voici comment il est utilisé:

p{ 
    -webkit-mask-image: url(/path/to/mask.png); 
    -o-mask-image: url(/path/to/mask.png); 
    -moz-mask-image: url(/path/to/mask.png); 
    mask-image: url(/path/to/mask.png); 
} 

Cela masque chaque paragraphe avec le chemin de l'image. Heureusement, il se dégrade bien dans IE, de sorte que les utilisateurs ne remarqueront même rien de mal, il apparaîtra comme du texte normal! donc si vous n'avez pas VRAIMENT besoin de soutien IE, faites cela. Si vous avez besoin du support IE:

Utilisez une image. Faites-le dans Photoshop. :(

Voici une démonstration de la façon dont son utilisé:

http://trentwalton.com/2011/05/19/mask-image-text/

Answer 2

Ils ne sont pas goût WebKit à l'extérieur de la propriété mask-image mais pour le moment vous pouvez simuler via "filter" in IE et via SVG in Firefox (/Opera?/WebKit?/IE?)