Attribut OPACITY

Rôle

L’attribut opacity permet de spécifier l’opacité ou la transparence d’un élément. Elle est définie par un nombre décimal compris entre 0 (100% transparent) et 1 (100% opaque).

Note : si un bloc parent devient transparent, tous les éléments enfants (texte, image..) de ce bloc seront aussi transparents.

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.Opacity

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

img{
  transition: all;
  transition-duration: 1s;
  transition-timing-function : ease;
  width: 300px;
  height: 200px;
  opacity : 1;
}
img:hover{
  opacity: 0.5;
}

– Le code HTML

<img src="lorempixel.com/output/city-q-g-200-200-8.jpg" alt="">

Résultat

Survolez l’image…pour la rendre transparente à 50%.

Compatibilité

L’attribut opacity est pris en charge par tous les principaux navigateurs.
A partir d’Internet Explorer 9.
IE8 et les versions antérieures prennent en charge une alternative, la propriété filter.

filter : Alpha(opacity=60)

Valeurs

Les différentes valeurs de l’attribut transition-delay sont:

Valeur décimale

Comprise entre  0 (100% transparent) et 1 (opaque)
Syntaxe :
opacity : 0.5

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécification.
Syntaxe :
opacity : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
opacity : inherit

A voir aussi

transition– transition-duration– transition-property– transition-timing-function