Il existe trois façons de modifier la transparence d'un élément en CSS :
en utilisant la propriété d'opacité,
en utilisant la fonction rgba(),
en utilisant la fonction hsla().

1. La propriété d'opacité

La propriété opacity vous permet de rendre tout élément d'une page Web partiellement ou complètement transparent. Cette propriété modifie la transparence des éléments qui ont une image d'arrière-plan (image) ou un arrière-plan avec une couleur ou un dégradé. Si l'élément pour lequel la propriété d'opacité est appliquée contient d'autres éléments, ils changeront également leur opacité.
La propriété d'opacité va de 0 (complètement transparent) à 1 (opaque), par exemple :

H1 (couleur : #CD6829 ;) div (fond : #CDD6DB ; opacité : .3 ;)
Riz. 1. Transparence des éléments grâce à l'opacité

2. La fonction rgba()

Le modèle de couleur RGBA crée une dominante de couleur en mélangeant dans les proportions requises rouge rouge), vert vert) et bleu couleurs, et canal alpha (Alpha) est responsable du degré de transparence de la couleur. Contrairement à la propriété opacity, pour un bloc contenant d'autres éléments, la fonction rgba() ne changera que l'opacité du bloc.

Riz. 2. Modèle de couleur RVB h1 (couleur : # CD6829 ;) div (arrière-plan : rgba (205, 214, 219, 0,3 );)
Riz. 3. Transparence des éléments à l'aide de la fonction rgba()

3. La fonction hsla ()

Fonction Hsla() dont les paramètres signifient ton (Teinte), saturation, luminosité (Légèreté) et canal alpha (Alpha), vous permet également de définir une couleur semi-transparente.

Les teintes de couleur sont spécifiées sous forme de pourcentage à l'aide de la valeur correspondante de la roue chromatique. Le cercle lui-même est divisé en secteurs, sur les bords desquels se trouvent des couleurs primaires:

0/360 ° - rouge
60° - jaune
120° - vert
180° - bleu
240° - bleu
270° - violet
300° c'est du magenta.

Pour obtenir du noir, vous devez définir les valeurs de teinte, de saturation et de luminosité sur zéro - hsla (0, 0%, 0%, 1). Le blanc est obtenu à 100% de luminance hsla (0, 0%, 100%, 1), et le gris est à zéro saturation hsla (0, 0%, 50%, 1).

Avec l'avènement de CSS3, le travail des maquettistes est devenu beaucoup plus simple et logique : vous pouvez désormais personnaliser de manière vraiment flexible n'importe quel objet, en utilisant de moins en moins JavaScript. Disons que vous devez ajuster la transparence de l'arrière-plan - CSS propose immédiatement plusieurs options.

L'arrière-plan est défini par un ensemble d'attributs, background-repeat, background-attachment, background-origin, background-clip, background-color), et chacun d'eux peut être écrit séparément ou combiné sous l'attribut background. Regardons chacun d'eux de plus près.

Attribut de couleur d'arrière-plan

Même IE8 prend en charge cette méthode. Plusieurs images sont utilisées comme arrière-plans pour une mise en page fluide. Plus important encore, n'oubliez pas de définir la couleur d'arrière-plan dans CSS lorsque vous utilisez une image, car l'image peut tout simplement ne pas se charger pour les utilisateurs.

Attribut de position d'arrière-plan

Si vous utilisez une image pour définir l'arrière-plan d'un bloc, CSS vous permettra de positionner l'image n'importe où sur l'écran. Par défaut, l'image est située dans le coin supérieur gauche. L'attribut accepte soit des indications verbales (haut, bas, gauche, droite) soit des indications numériques (pourcentages, pixels et autres unités). Dans ce cas, vous devez spécifier deux valeurs : horizontalement et verticalement :

body (background-position: right center;) - dans cet exemple, l'arrière-plan sera situé sur le côté droit de la page, avec les mêmes distances en bas et en haut de l'image.

Attribut de taille d'arrière-plan

Parfois, vous devez utiliser CSS pour étirer ou réduire la taille de l'arrière-plan. Pour cela, l'attribut background-size est utilisé et la taille de l'arrière-plan peut être définie à la fois en pixels ou en pourcentages et dans toute autre unité de mesure.

Il y a quelques problèmes avec cet attribut : des préfixes doivent être utilisés pour afficher correctement l'arrière-plan dans les versions antérieures des navigateurs. Bien entendu, les versions actuelles prennent entièrement en charge cet attribut et le besoin de propriétés spécifiques a disparu.

Attribut de pièce jointe d'arrière-plan

Cet attribut spécifie le comportement de défilement de l'image d'arrière-plan. Ainsi, il peut prendre 3 valeurs (hors héritage, qui est commun à tous les attributs présentés dans cet article) :

• fixé- rend l'image sur le fond immobile;
• faire défiler- le fond défile avec le reste des éléments ;
• local- l'image en arrière-plan défile si le contenu a du défilement. Les arrière-plans qui dépassent le contenu sont capturés.

Exemple d'utilisation :

corps (fond-attachement fixe).

Firefox ne prend actuellement pas en charge cette dernière propriété (local).

Attribut d'origine de l'arrière-plan

Cet attribut est responsable du positionnement de l'élément. Les navigateurs antérieurs nécessitent l'utilisation de préfixes. La propriété elle-même a trois paramètres :

• rembourrage-boîte positionne le fond par rapport au bord, en tenant compte de l'épaisseur du cadre ;
• border-box diffère de la propriété précédente en ce que la ligne de bordure peut recouvrir complètement ou partiellement l'arrière-plan ;
• boîte-de-contenu positionne l'image en la liant au contenu.

Si plusieurs valeurs sont données, les navigateurs peuvent réagir différemment : Firefox et Opera n'acceptent que la première option.

Attribut de répétition d'arrière-plan

Généralement, si un arrière-plan est défini par une image, il doit se répéter horizontalement ou verticalement. C'est à cela que sert l'attribut background-repeat. Ainsi, l'arrière-plan d'un bloc dont le CSS contient une telle propriété peut avoir l'un de plusieurs paramètres :

• sans répétition- l'image apparaît sur la page en une seule version ;
• répéter- le fond est répété le long des axes x et y ;
• répéter-x- uniquement horizontalement ;
• répéter-y- uniquement verticalement ;
• espace- le fond est répété, mais si l'espace ne peut pas être rempli, alors des vides apparaissent entre les images ;
• tour- l'image est mise à l'échelle s'il est impossible de remplir toute la zone avec des images entières.

Un exemple d'utilisation de l'attribut :

corps (répétition d'arrière-plan : répétition sans répétition)- de la même manière background-repeat : répétition-y.

Dans CSS3, il est possible de définir des valeurs pour plusieurs images en listant les paramètres séparés par des virgules.

Attribut de clip d'arrière-plan

Cet attribut définit le comportement du fond sous les bordures (par exemple, dans le cas des bordures en pointillés) :

• rembourrage-boîte- le fond est affiché strictement à l'intérieur du bloc ;
• border-box- l'image passe sous les cadres ;
• boîte-de-contenu- l'image en arrière-plan n'apparaît qu'à l'intérieur du contenu.

Exemple d'utilisation :

body (clip d'arrière-plan: content-box;).

Chrom et Safari nécessitent le préfixe -webkit-.

Opacité et attributs de filtre

L'attribut opacity vous permet de définir la transparence de l'arrière-plan - la propriété CSS fonctionnera dans tous les navigateurs. La valeur est définie dans la plage de 0,0 à 1,0 inclus. Dans ce cas, vous pouvez régler la transparence du fond CSS sans valeur entière : au lieu de 0,3, il suffit d'écrire 3 :

.block (image d'arrière-plan : url (img.png ); opacité : .3 ;).

Pour définir la transparence de l'arrière-plan, dont le CSS fonctionnera même pour IE en dessous de la neuvième version, utilisez l'attribut filter :

.block (image de fond : url (img.png) ; filtre : alpha (opacité = 30) ;).

Dans ce cas, la valeur d'opacité est définie dans la plage de 0 à 100. Notez que l'attribut d'opacité diffère du paramètre d'opacité utilisant RGBA en héritage : lors de l'utilisation de l'opacité, non seulement l'arrière-plan devient transparent, mais également tous les éléments à l'intérieur du bloc .

Suivez toujours les statistiques d'utilisation des navigateurs dans la CEI et dans tous les autres pays. Le plus gros problème de tous les concepteurs de mise en page est les anciennes versions d'IE, elles ne permettent pas une utilisation complète de CSS3. Lors du codage, n'oubliez pas d'utiliser des services spéciaux qui vérifient si votre navigateur prend en charge une propriété CSS. Si vous ne pouvez pas installer d'anciennes versions de navigateurs, recherchez un service qui vérifiera le fonctionnement du site Web dans différents navigateurs en ligne.

Dans cette leçon, nous analyserons ces CSS Propriétés - opacité et RVBA... Propriété Opacité n'est responsable que de la transparence des éléments, et la fonction RVBA- pour la couleur et la transparence, si vous spécifiez la valeur de transparence du canal alpha.

Opacité CSS

Valeur numérique pour opacité spécifié dans la plage de 0,0 à 1,0, où zéro correspond à une transparence totale et un, au contraire, à une opacité absolue. Par exemple, pour voir une transparence de 50 %, vous devez définir la valeur sur 0,5. Il faut garder à l'esprit que opacité s'étend à tous les enfants du parent. Cela signifie que le texte sur un fond translucide sera également translucide. Et c'est déjà un inconvénient très important, le texte ne ressort pas si bien.

Dans la capture d'écran, vous pouvez clairement voir que le texte noir est devenu le même translucide que le fond bleu.

Div (
fond : url (images / votreimage.jpg) ; / * Image de fond * /
largeur : 750px ;
hauteur : 100px ;
marge : automatique ;
}
.bleu (
arrière-plan : # 027av4 ; / * Couleur de fond semi-transparente * /
opacité : 0,3 ; / * Valeur de translucidité du fond * /
hauteur : 70px ;
}
h1 (
rembourrage : 6px ;
famille de polices : Arial Black ;
font-weight : plus gras ;
taille de la police : 50px ;
}

Transparence CSS au format RGBA

Format d'enregistrement couleur RVBA, est une alternative plus moderne à la propriété opacité. R (rouge), G (vert), B (bleu)- signifie : rouge, vert, bleu. La dernière lettre UNE- signifie le canal alpha, qui définit la transparence. RVBA contrairement à Opacité n'affecte pas les enfants.

Regardons maintenant notre exemple en utilisant RVBA... Remplaçons ces lignes dans les styles.

Arrière-plan : ## 027av4 ; /* Couleur de l'arrière plan */
opacité : 0,3 ; / * valeur de translucidité de fond * /

à la ligne suivante

Contexte : rgba (2, 127, 212, 0,3) ;

Comme vous pouvez le voir, la valeur de transparence de 0,3 est la même pour les deux méthodes.

Résultat de l'exemple avec RGBA :

La deuxième capture d'écran est bien meilleure que la première.

En jouant avec la translucidité du fond des blocs, vous pouvez obtenir des effets intéressants sur le site. Il est important que ces blocs translucides recouvrent un motif panaché tel qu'une photographie. Ce n'est que dans ce cas que l'effet sera perceptible. Cette technique a longtemps été utilisée dans la conception, avant même l'apparition de tout CSS3, il a été implémenté uniquement dans des programmes graphiques.

Si le client souhaite que la mise en page apparaisse bien dans les anciennes versions du navigateur Internet Explorer puis ajouter la propriété filtre et n'oubliez pas de commenter afin que la validité du code ne soit pas affectée.

Conclusion

Format RVBA sont pris en charge par tous les navigateurs modernes, à l'exception Internet Explorer... Il est également très important que RVBA flexible, il n'agit que sur un élément précis spécifié, sans affecter les enfants. Il est clair que cela est plus pratique pour le concepteur de la mise en page. Mon choix est clairement en faveur du format RVBA pour obtenir transparence en CSS.

Pour une meilleure consolidation du matériel et une plus grande clarté, je vous suggère de passer en revue.

L'effet de translucidité d'un élément est clairement visible dans l'image d'arrière-plan et s'est généralisé dans différents systèmes d'exploitation, car il est élégant et beau. Dans la conception Web, la translucidité est également appliquée et obtenue via la propriété d'opacité ou le format de couleur RVBA défini pour l'arrière-plan.

Propriété d'opacité

La principale caractéristique de cette propriété est que la valeur de transparence affecte tous les enfants à l'intérieur, pas seulement l'arrière-plan. Cela signifie que l'arrière-plan et le texte deviendront translucides et vous ne pourrez pas augmenter le niveau de transparence en ajoutant. Tableau 1 montre l'apparence du texte et de l'arrière-plan avec différentes valeurs d'opacité.

L'exemple 1 montre comment créer un bloc semi-transparent en utilisant l'opacité.

Exemple 1. Contexte sur une page Web

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RVBA

Habituellement, par conception, seul l'arrière-plan d'un élément doit être semi-transparent et le texte doit être opaque pour maintenir la lisibilité. La propriété opacity est inappropriée ici car le texte à l'intérieur de l'élément sera également partiellement transparent. Il est préférable d'utiliser le format RGBA, dont le canal alpha fait partie, ou en d'autres termes la valeur de transparence. La valeur est écrite rgba, puis les valeurs des composants de couleur rouge, bleu et vert sont répertoriées entre parenthèses séparées par des virgules. Le dernier est la transparence, qui est définie de 0 à 1 (Fig. 1), 0 étant la transparence totale et 1 l'opacité de la couleur.

Riz. 1. Syntaxe pour l'utilisation de rgba

L'exemple 2 montre le format RGBA utilisé pour créer un arrière-plan semi-transparent.

Exemple 2. Arrière-plan semi-transparent

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Le résultat de cet exemple est montré dans la Fig. 2. La valeur d'opacité de l'arrière-plan est définie sur 90 %.

Riz. 2. Arrière-plan semi-transparent et texte opaque