En voyant cette page : http://techgnotic.deviantart.com/journal/You-May-Say-I-m-An-Artist-503741188

Je me demandais comment il faisait l’effet du texte transparent donnant un aperçu sur l’image de fond de la page. Le truc ici, c’est que ça défile aussi avec la page.

Évidemment, avec des images c’est très facile à faire : il suffit de laisser une image avec une partie en transparent (canal alpha des PNG ou des gif) et de mettre l’image de fond de page en "fixed").

Mais avec du CSS et du texte ? C’est aussi simple ?

J’ai essayé quelques trucs et voilà ce à quoi je suis arrivé :
– l’astuce avec l’image, qui fonctionne dans tous les navigateurs mais qui n’est pas facile à maintenir
– la même chose, mais avec des blocs HTML (div, etc.). Notez que les CSS permettent désormais de donner à peu près toutes les formes à de simples blocks, comme des étoiles ou des smiley, si on veut.
– une astuce avec Background-clip, mais qui ne fonctionne que pour Webkit.

– et enfin une astuce avec les masques SVG qui fonctionne partout.

Pas mal, non ?