Médiaforma

All posts tagged opacité

L’opacité d’un élément est définie avec la propriété CSS opacity.

Saisissez le code suivant dans Notepad++ et vérifiez qu’il fonctionne correctement :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Opacité d'un élément</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    Appuyez sur les boutons pour modifier l'opacité de l'image<br>
    <button id="semi">Opacité 50%</button>
    <button id="plein">Opacité 100%</button><br><br>
    <img src="chat.jpg" id="chat">
    <script>
      $(function() {
        $('#semi').on('click',function(){
          $('#chat').css('opacity','0.5');
        });
        $('#plein').on('click',function(){
          $('#chat').css('opacity','1');
        });
      });
    </script>
  </body>
</html>

 

 

 

Voici ce que vous devez obtenir :

 


 

Le changement d’opacité peut se faire progressivement avec la fonction fadeTo() :

fadeTo(durée en ms, opacité en %)

 

Exercice

Modifiez le code précédent pour obtenir une modification progressive de l’opacité en 2000 ms.

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Opacité d'un élément</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    Appuyez sur les boutons pour modifier l'opacité de l'image<br>
    <button id="semi">Opacité 50%</button>
    <button id="plein">Opacité 100%</button><br><br>
    <img src="chat.jpg" id="chat">
    <script>
      $(function() {
        $('#semi').on('click',function(){
          $('#chat').fadeTo(2000,0.5);
        });
        $('#plein').on('click',function(){
          $('#chat').fadeTo(2000,1);
        });
      });
    </script>
  </body>
</html>

La rubrique précédente vous a montré comment définir des couleurs en CSS en utilisant un code hexadécimal ou en transmettant des valeurs comprises entre 0 et 255 ou des pourcentages à la fonction rgb(). Vous allez maintenant franchir un pas supplémentaire en utilisant la fonction CSS3 rgba(r, v, b, a). Dans cette fonction :

  • r, v et b représentent les composantes rouge, verte et bleue de la couleur, comprises entre 0 et 255 ou entre 0% et 100% ;
  • a représente la transparence, entre 0 (totalement transparent) et 1 (totalement opaque).

A titre d’exemple, nous allons réutiliser le code de la rubrique précédente, en affectant une transparence de 0.8 à l’arrière-plan de couleur rouge, une transparence de 0.5 à l’arrière-plan de couleur verte et une transparence de 0.2 à l’arrière-plan de couleur bleue.

La commande Exécution / Launch in IE affiche le résultat dans Internet Explorer :


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 :