Blog iamvdo.meUtiliser la transparence dans vos couleurs
rgba() n’est pas une propriété CSS, mais une fonction. Elle s’utilise sur toutes les propriétés qui spécifient une couleur, comme par exemple :
-
background -
color -
border-color - ...
La syntaxe
Comme pour la fonction rgb(), rgba() utilise les valeurs rouge, vert et bleu d’une couleur, et ajoute l’opacité. L’exemple suivant affecte donc la couleur Rouge:156, Vert:25, Bleu:26 et une valeur de transparence de 80%.
background: rgba( 156, 25, 26, 0.8);Note : Contrairement à opacity qui rend transparent un élément et tous ses enfants, rgba() applique cette transparence uniquement à la couleur appliquée.
Dégradation gracieuse
Pour les anciens navigateurs, pensez toujours à spécifier d’abord une couleur sans transparence. Ainsi, les navigateurs compatibles utiliseront la deuxième déclaration. Par exemple :
div{
background: rgb( 156, 25, 26);
background: rgba( 156, 25, 26, 0.8);
}
#1par bokdany, le 26 janvier 2014
Un site comme j’aime, pas de blabla, explication simple et claire, un exemple et bim ! dans mes favoris !!!
juste une ptite question, peut on y mettre une valeur en hexa ?
#2par css3create, le 26 janvier 2014
@bokdany : Merci ! :) Non, rgba ne permet pas d’utiliser une valeur en hexa malheureusement.