La transparence de la couleur peut être définie via rgba() et hsla(), mais ils ne peuvent définir la transparence que lors de la définition de la couleur et ne peuvent pas définir la transparence des images ou d'autres éléments.
Deux façons de définir la transparence avec CSS :
1. CSS rgba() définit la transparence des couleurs
grammaire:
rgba(R,V,B,A);
RGBA est l'abréviation des trois mots Red (rouge) Green (vert) Blue (bleu) et Alpha (opacité). Les valeurs de couleur RVBA sont une extension des valeurs de couleur RVB, avec un canal alpha – qui spécifie l'opacité de l'objet.
Introduction aux valeurs dans rgba() :
R : valeur rouge. Entier positif (0~255)
G : valeur verte. Entier positif (0~255)
B : valeur bleue. Entier positif (0~255)
R : Transparence. La valeur est comprise entre 0 et 1
rgba() peut simplement définir la transparence des couleurs, ce qui a de nombreuses applications dans la mise en page. Par exemple : rendez l'arrière-plan transparent, mais le texte au-dessus est opaque.
Exemple:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>programmation dotcpp</title><style>.demo{width:350px;height:300px;margin:50pxauto;}.demo*{width :120px;hauteur:120px;marge:10px;float:gauche;}.demo1{background:rgba(255,0,0,1);}.demo2{background:rgba(255,0,0,0.5);} </style></head><body><divclass=demo><divclass=demo1>La couleur d'arrière-plan est opaque et le texte est opaque ! </div><divclass=demo2>La couleur de fond est semi-transparente et le texte est opaque ! </div></div></body></html>Résultats en cours d'exécution :
Dans l'exemple ci-dessus, les valeurs de couleur définies sont les mêmes, mais la transparence est différente.
2. L'attribut CSS d'opacité définit la transparence de l'arrière-plan
grammaire:
opacité:valeur;
valeur : Spécifie l'opacité, de 0,0 (entièrement transparent) à 1,0 (entièrement opaque).
L'attribut opacity est hérité et rendra tous les éléments du conteneur transparents ;
Exemple:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>attribut d'opacité</title><style>.demo{width:280px;height:140px;margin:50pxauto;}.demo1,.demo2 {largeur : 120 px ; hauteur : 120 px ; marge : 10 px ; float : gauche ; arrière-plan : #2DC4CB ;}.demo1{opacity : 1 ;}.demo2{opacity :0.5;</style></head><body> <divclass=demo><divclass=demo1><p>La couleur d'arrière-plan est opaque et le texte est opaque ! </p></div><divclass=demo2><p>La couleur d'arrière-plan est transparente et le texte est également transparent ! </p></div></div></body></html>Résultats en cours d'exécution :
Opacité : 0,5 ; rend tous les éléments du conteneur demo2 translucides.
Résumé : Bien que la méthode rgba() et la méthode d'opacité puissent obtenir des effets de transparence, rgba() n'agit que sur la couleur de l'élément ou sur sa couleur d'arrière-plan (les éléments enfants de l'élément avec le jeu de transparence rgb() n'hériteront pas de sa couleur). effet de transparence) et l'opacité est héritée, affecte non seulement l'élément lui-même, mais rend également tous les sous-éléments de l'élément transparents.