Opacité CSS (Opacité)

La propriété opacity CSS spécifie l'opacité d'un élément. La propriété opacity spécifie l'opacité d'un élément. En d'autres termes, la propriété opacity spécifie l'étendue de couverture du fond derrière un élément.

Opacité croisée

Maintenant, l'opacité (opacity) est une propriété CSS3Une partie des normes, mais elle existe depuis longtemps. Cependant, les navigateurs plus anciens ont des méthodes différentes pour spécifier l'opacité ou la transparence.

Firefox, Safari, Chrome, Opera et IE9la transparence CSS

C'est la dernière syntaxe de l'opacité CSS dans tous les navigateurs actuels.

p {
　　　　opacité: 0.7;
}

Les règles de style suivantes rendront l'élément paragraphe70% opaque (ou30% transparent).

La valeur de l'attribut opacity peut varier de 0.0 à1.0. Défini comme opacity:1; rend l'élément完全不透明 (c'est-à-dire 0% transparent), opacity: 0; rend l'élément complètement transparent (c'est-à-dire100% transparent).

Internet Explorer 8et les méthodes d'implémentation de la transparence CSS pour les versions inférieures

Internet Explorer 8et les versions plus anciennes prennent en charge la propriété exclusive de Microsoft "filtre alpha" pour spécifier la transparence de l'élément.

p {
　　　　filtre: alpha(opacité=50);
　　　　zoom:　1;　　/*　Correction pour IE7　*/
}

Transparence CSS compatible avec tous les navigateurs

En combinant ces deux étapes, vous obtiendreztous les navigateursdesCode de transparence.

p {
　　　　opacité: 0.5;　　/*　Opacité pour les navigateurs modernes　*/
　　　　filtre: alpha(opacité=50);　　/*　Opacité pour IE8　et inférieur　*/
　　　　zoom:　1;　　/*　Correction pour IE7　*/
}

Transparence des images CSS

Vous pouvez également créer des images transparentes en utilisant l'opacité CSS.

Les trois images de la figure suivante proviennent de la même source d'image. La seule différence entre elles est leur transparence.

Changement de transparence de l'image au survol de la souris

Les exemples suivants montrent les utilisations courantes de l'opacité des images CSS, où l'opacité de l'image change lorsque l'utilisateur déplace le pointeur de la souris sur l'image.

—déplacez le pointeur de la souris sur l'image pour voir l'effet.

Texte dans la boîte transparente

Lorsque vous utilisez l'opacité sur un élément, non seulement le fond de l'élément aura une transparence, mais tous ses éléments enfants deviendront transparents. Si la valeur de l'opacité augmente, cela rendra le texte à l'intérieur de l'élément transparent difficile à lire.

Pour éviter cela, vous pouvez utiliser une image PNG transparente ou placer le bloc de texte à l'extérieur de la boîte transparente, puis utiliser un négatifmargeoupositionnement CSSle pousser visuellement à l'intérieur.

div {
　　　　float: left;
　　　　opacité: 0.7;
　　　　bord:　1px solide #949781;
}
p {
　　　　float: left;
　　　　position: relative;
　　　　marge-left:　-400px;
}

l'utilisation de l'opacité RGBA dans CSS

En dehors de RGB, CSS3Une nouvelle méthode RGBA a également été introduite pour spécifier une couleur, qui inclut l'opacité alpha comme partie de la valeur de couleur. RGBA signifie Rouge Bleu Vert Alpha.

La déclaration RGBA est une méthode très simple pour définir l'opacité des couleurs.

div {
　　　　background: rgba(200,　54,　54, 0.5);
}
p {
　　　　color: rgba(200,　54,　54, 0.25);
}

Les trois premiers chiffres représentent les valeurs de couleur dans les valeurs RGB, c'est-à-dire rouge (0-255), vert (0-255), bleu (0-255), le quatrième nombre représente la valeur entre 0 et1valeur d'opacité alpha entre (0 rend la couleur complètement transparente, et la valeur1le rendant parfaitement opaque).

Une caractéristique importante à noter concernant l'opacité RGBA est-Capacité de spécifier l'opacité d'une couleur individuelle. En utilisant RGBA, nous pouvons rendre la couleur du texte transparente tout en conservant le fond complet.

— ou ignorer la couleur du texte, ne changer que l'opacité du fond.

Vous verrez que l'utilisation de RGBA permet de spécifier facilement une couleur individuelle plutôt que l'opacité de l'élément entier. Cependant, il est toujours recommandé de définir une couleur de remplacement pour les navigateurs qui ne prennent pas en charge les couleurs RGBA.

Couleur de remplacement pour la déclaration RGBA

Tous les navigateurs ne prennent pas en charge les couleurs RGBA. Cependant, vous pouvez fournir d'autres choix pour les navigateurs non pris en charge, par exemple des images PNG de couleur unie ou transparentes.

p {
　　　　/*　Remplacement pour les navigateurs web qui ne prennent pas en charge RGBA39;t ne supporte pas RGBA　*/
　　　　background: rgb(0, 0, 0);
　　　　/*　RGBa avec 0.5　opacity　*/
　　　　background: rgba(0, 0, 0, 0.5);
}