Accueil    CSS    Propriété opacity
 



style css opacity  Style CSS opacity

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété opacity permet de gérer l'opacité (équivalent à la transparence) d'un élément html. Il est possible de lui appliquer une valeur entre 0 et 1, 0 correspondant au niveau de transparence le plus fort (l'élément est complètement transparent) et 1 le niveau d'opacité le plus fort (l'élément n'applique pas d'effet de transparence).

Une problématique récurrente sur la transparence est l'application de cet effet sur le contenu de l'élément lorsque l'on souhaite l'appliquer sur l'arrière plan. Le texte devient parfois peu lisible si la transparence définie sur le conteneur parent est forte.
Dans ce cas il est possible avec le CSS3 d'utiliser la nomenclature de couleur "rgba" tenant pour rgb alpha. Il est avec cette syntaxe possible de définir l'opacité comme suit :

     background-color: rgba(120,180,240,0.5);

Une opacité de valeur 0.5 sera alors appliquée uniquement sur l'arrière plan de l'élément et pas sur son contenu.


Les versions d'Internet Explorer antérieures à la 8 ne supportent pas la propriété opacity. Il est dans ce cas possible d'utiliser le style filter (filter:alpha(opacity=50); par exemple).



Propriétés pour le style opacity :




Propriété Définition Valeurs CSS
opacity Détermine l'opacité ou la transparence d'un élément html valeur (entre 0 et 1)
inherit
CSS 2


Exemple d'utilisation de la balise opacity :





<div style="position:relative; border:solid 1px black; width:450px; height:230px; background-color:silver;">
   <div style="position:absolute; width:200px; padding:10px 20px; top:10px; left:10px;
      opacity:1; background-color:steelblue;">
      Opacité valorisée à 1
   </div>
   <div style="position:absolute;width:200px; padding:10px 20px; top:90px;
      left:100px; opacity:0.5; background-color:steelblue;">
      Opacité valorisée à 0.5
   </div>
   <div style="position:absolute; top:180px; left:200px; width:200px;
      padding:10px 20px; background-color:rgba(70,130,180,0.5); ">
      Couleur rgba valorisée à 0.5
   </div>
</div>



Opacité valorisée à 1
Opacité valorisée à 0.5
Couleur rgba valorisée à 0.5