81
Utilisation des effets d’arrière‑plan
Figure 4.23
Boîte d’alerte à bords
arrondis à 80 %
d’opacité.
Le.principal.problème.avec.l’opacité.CSS.tient.à.ce.que.le.contenu.de.l’élément.auquel.vous.
l’appliquez.en.hérite,.comme.l’arrière-plan..Si.vous.examinez.la.Figure 4.23,.vous.verrez.
ainsi.que.le.texte.dans.la.page.s’affiche.à.travers.la.boîte.d’alerte.également..Ce.n’est.pas.un.
problème.si.vous.utilisez.une.très.forte.opacité.avec.un.texte.contrasté..Mais.avec.une.opacité.faible,.le.contenu.de.la.boîte.peut.commencer.à.devenir.illisible..C’est.là.qu’intervient.
le.RGBa.
RGBa
RGBa.est.un.mécanisme.permettant.de.définir.la.couleur.et.l’opacité.en.même.temps..RGB.
est. l’acronyme. de. Red, Green, Blue. (rouge,. vert,. bleu),. "a". signifie. "alpha. transparency".
(transparence.alpha)..Pour.utiliser.RGBa.dans.l’exemple.précédent,.vous.procéderiez.de.la.
manière.suivante :
.alert {
background-color: rgba(0,0,0,0.8);
border-radius: 2em;
}
Les.trois.premiers.chiffres.représentent.les.valeurs.de.rouge,.de.vert.et.de.bleu.de.la.couleur..
Ici,.la.boîte.d’alerte.est.noire,.aussi.toutes.les.valeurs.sont-elles.égales à 0..Le.dernier.chiffre.
définit.la.valeur.décimale.de.l’opacité..0.8 correspond.à.un.arrière-plan.opaque.à.80 %.(ou.
transparent.à.20 %).[voir.Figure 4.24]..La.valeur 1.rend.la.boîte.d’alerte.opaque.à.100 %..La.
valeur 0.la.rend.complètement.transparente.
Figure 4.24
Boîte d’alerte à bords
arrondis opaque à
80 % en RGBa.