17a.02.2024

Un code que je n'ai pas beaucoup utilisé mais...

Mettre une image en fond de texte, avec ou sans animation.

Pour cela, il faut avoir un texte assez gros pour que l'image soit bien visible; le plus simple est d'utiliser des textures.

Voilà l'exemple de la première page publiée, sans animation:

BONJOUR!

<p id="bkc">BONJOUR!</p>
<style><!--
#bkc{ width:800px; height:auto; margin:50px auto; text-align:center; font-size:100px; color:transparent; background:url('http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif'); -webkit-background-clip : text; background-clip : text; -webkit-text-stroke:2px black; transition:all 1s linear;}
#bkc:hover{background:url('http://ekladata.com/6RSWOjHP72iEUHutR4ApjlyHOAo.gif'); -webkit-background-clip : text; background-clip : text; -webkit-text-stroke:2px white;}
--></style>

Avec animation au survol:

BONJOUR!

<p id="bka">BONJOUR!</p>
<style><!--
#bka{ width:800px; height:auto; margin:50px auto; text-align:center; font-size:100px; color:transparent; background:url('http://ekladata.com/p6MGjUFNr0JKVglGxc8e_SlC9r0/anime-378.gif'); -webkit-background-clip : text; background-clip : text; -webkit-text-stroke:2px black; transition:all 1s linear;}
#bka:hover{background:url('http://ekladata.com/6RSWOjHP72iEUHutR4ApjlyHOAo.gif'); -webkit-background-clip : text; background-clip : text; -webkit-text-stroke:2px white;}
--></style>

Voyons avec des images:

BONJOUR !

<p id="bkb">BONJOUR !</p>
<style><!--
#bkb{ width:800px; height:auto; margin:50px auto; text-align:center; font-size:100px; color:transparent; background:url('http://ekladata.com/xXPnqOwohEgb1kuZI-0YiIldvCw.jpg'); background-size:800px 300px; background-position:center center; -webkit-background-clip : text; background-clip : text; -webkit-text-stroke:2px black; transition:all 1s linear;}
#bkb:hover{background:url('http://ekladata.com/gNWeL61-ZTrJUuXj6HOVPgI5ZpE.jpg'); background-position:center center;-webkit-background-clip : text;}
--></style>