Médiaforma

Opacité

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

La propriété CSS3 opacity permet de définir la transparence d’un élément.

Pour illustrer cette propriété, nous allons superposer deux images et donner un effet de transparence à celle qui est au-dessus de l’autre. Voici les images utilisées :


Les deux images sont insérées dans une balise <div>. La première est de classe dessus et la deuxième de classe dessous.

Il ne reste plus qu’à définir les deux classes pour mettre en place l’effet de transparence.

Pour que les deux images se superposent, on les positionne de façon absolue dans la balise <div>. Le z-index de l’image de classe dessus est initialisé à 1 et son opacité à 0.6.

Le z-index de l’image de classe dessous est initialisé à 0. Cette image sera donc au-dessous de l’autre, qui a un z-index égal à 1.

Exécutons ce code. Le chat apparaît bien en avant-plan et on peut voir au travers :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply