CSS a trois façons de modifier la transparence de l'article:
utiliser la propriété Opacité,
utilisation de la fonction RGBA (),
en utilisant la fonction HSLA ().
1. Propriété d'opacité
La propriété Opacity vous permet de rendre n'importe quel élément de la page Web partiellement ou totalement transparent. Cette propriété change la transparence des éléments pour lesquels l'image d'arrière-plan est définie (image) ou un arrière-plan avec une couleur ou une gradient est définie. Si l'élément pour lequel la propriété d'opacité est appliquée, contient d'autres éléments en soi, ils changeront également leur transparence.
La propriété d'opacité prend des valeurs dans la gamme de 0 (complètement transparent) à 1 (opaque), par exemple:
H1 (couleur: # CD6829;) div (arrière-plan: # CDD6DB; opacité: .3;) 
Figure. 1. Transparence des éléments utilisant l'opacité
2. Fonction RGBA ()
Le modèle de couleur RGBA crée une nuance de couleur en mélangeant dans les proportions requises rouge rouge), vert vert) et bleu bleu) Fleurs, A. canal alpha (alpha) Responsable du degré de transparence de la couleur. Contrairement à la propriété Opacité, pour un bloc contenant d'autres éléments, la fonction RGBA () modifiera uniquement la transparence du bloc.
Figure. 2. Modèle de couleur RGB H1 (Couleur: # CD6829;) DIV (arrière-plan: RGBA (205, 214, 219, 0,3);) 
Figure. 3. Transparence des éléments utilisant la fonction RGBA () 3. Fonction HSLA ()
Fonction HSLA (), dont les paramètres signifient tonalité (teinte), saturation, légèreté (légèreté) et canal alpha (alpha)Vous permet également de spécifier la couleur translucide.
Les nuances de couleur sont définies comme un pourcentage en utilisant la valeur appropriée du cercle de couleur. La gamme elle-même est divisée en secteurs, sur les limites desquelles sont les couleurs principales:
0/360 ° - rouge
60 ° - jaune
120 ° - vert
180 ° - couleur bleue
240 ° - couleur bleue
270 ° - couleur violette
300 ° - Couleur magenta.
Pour créer un effet de transparence dans CSS, la propriété Opacité est utilisée.
IE8 Navigateur et versions antérieures Prise en charge d'une propriété alternative - Filtre: Alpha (opacité \u003d x), où "x" peut prendre une valeur de 0 à 100, plus la valeur est plus transparente, plus elle est transparente.
Tous les autres navigateurs prennent en charge la propriété Standard CSS Opace, qui peut être prise comme valeur du nombre de 0,0 à 1,0, plus la valeur est petite, plus elle est transparente l'élément:
Essayer
Transparence en vol stationnaire
Pseudo-Classe: Hover vous permet de changer l'apparence des éléments lorsque vous planifiez le curseur de la souris. Nous profiterons de cette possibilité que l'image lors de la navigation de la souris perd sa transparence:
Essayer
Fond de transparence
Il existe deux moyens possibles de faire un élément transparent: la propriété d'opacité décrite ci-dessus et indiquant la couleur de l'arrière-plan dans le format RGBA.
Peut-être êtes-vous déjà familiarisé avec le modèle de représentation des couleurs au format RGB. RVB (rouge, vert, bleu - rouge, vert, bleu) - système de couleur, définissant une nuance en mélangeant rouge, vert et bleu. Par exemple, pour définir une couleur jaune pour le texte, vous pouvez utiliser l'une des annonces suivantes:
Couleur: RVB (255.255.0); Couleur: RVB (100%, 100%, 0);
Les couleurs spécifiées à l'aide de RVB diffèrent des valeurs hexadécimales que nous utilisons avant de vous permettre d'utiliser le canal de transparence alpha. Cela signifie que à travers le fond de l'élément avec une transparence alpha sera vu ce qui est situé sous elle.
L'annonce de la couleur RGBA est similaire à la syntaxe avec des règles RVB standard. Cependant, entre autres choses, nous devrons déclarer comme RGBA (au lieu de RVB) et définir une valeur de transparence décimale supplémentaire après la valeur de couleur dans la plage de 0,0 (transparence totale) à 1 (opacité complète).
Couleur: RGBA (255.255,0,0,5); Couleur: RGBA (100%, 100%, 0.0.5);
La différence entre l'opacité et la propriété RGBA est que la propriété d'opacité applique la transparence à l'ensemble de l'élément entier, c'est-à-dire que tout le contenu de l'élément devient transparent. Et RGBA vous permet de définir la transparence sur des parties individuelles de l'élément (par exemple, uniquement du texte ou de l'arrière-plan):
Corps (ICPG) .Prim1 (largeur: 400px; marge: 30px 50px; couleur arrière-plan: #ffffff; frontière: 1px solide noir; Poids de la forme: audacieux; opacité: 0.5; opacité: alpha (opacité \u003d 70); / * Pour les versions IE8 et antérieures * / Text-Align: Centre;) .Prim2 (largeur: 400px; Marge: 30px 50px; Couleur de l'arrière-plan: RGBA (255 255 255,0,5); Frontière: 1px Noir solide; Poids: Bold ; Text-Align: Centre;) Essayez »
Remarque: les valeurs RGBA ne sont pas prises en charge dans le navigateur IE8 et les versions antérieures. Pour déclarer l'option de sauvegarde des anciens navigateurs qui ne prennent pas en charge les valeurs de couleur avec des canaux alpha, vous devez la spécifier d'abord à la valeur de RGBA: Contexte: RVB (255.255.0); Contexte: RGBA (255.255,0,0,5);
L'effet de la translucidité de l'élément est bien perceptible sur le dessin d'arrière-plan et a été distribué dans différents systèmes d'exploitation, car il a l'air élégant et beau. Dans la conception Web, la translucidité est également appliquée et est obtenue en raison de la propriété d'opacité ou du format de couleur RGBA, qui est défini pour l'arrière-plan.
Propriété d'opacité
La principale caractéristique de cette propriété est que la valeur de la transparence agit sur tous les éléments de l'enfant à l'intérieur et non seulement à l'arrière-plan. Cela signifie que l'arrière-plan et le texte deviendront translucides et augmenteront le niveau de transparence, l'ajout, ne fonctionnera pas. Dans l'onglet. 1 montre le type de texte et de fond avec différentes valeurs d'opacité.
L'exemple 1 montre la création d'une unité translucide à l'aide de l'opacité.
Exemple 1. Arrière-plan sur la page Web
HTML5 CSS3 IE 9+ CR OP SA FX
Rgba
Habituellement, la conception de l'élément devrait être translucide sur la conception et le texte est opaque pour préserver sa lisibilité. La propriété Opacité ne correspond pas 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 une partie est un canal alpha ou en d'autres termes, la valeur de transparence. RGBA est écrit comme une valeur, puis entre parenthèses à travers la virgule, les valeurs des composants de couleur rouge, bleu et vert sont répertoriés. Ce dernier est la transparence, qui se couche de 0 à 1 (figure 1), tandis que 0 signifie une transparence complète et une opacité de la couleur ..
Figure. 1. Syntaxe d'application RGBA
L'exemple 2 montre l'utilisation du format RGBA pour créer un fond translucide.
Exemple 2. Fond translucide
HTML5 CSS3 IE 9+ CR OP SA FX
Le résultat de cet exemple est illustré à la Fig. 2. La valeur d'opacité pour l'arrière-plan est définie à 90%.
Figure. 2. Fond translucide et texte opaque
Dirigez la transparence de l'image d'arrière-plan (au moins pour l'année 2016e) de quelque manière que ce soit par le biais de CSS (y compris CSS 3), vous n'ins installerez pas. Il existe de nombreuses méthodes de dérivation de résoudre ce problème.
Mélanger des arrière-plans
La solution la plus facile consiste à mélanger deux arrière-plans (images et couleurs translucides). Cette méthode convient si sous l'image "Arrière-plan transparente" du même type de fond car Ce n'est pas du tout transparence et son imitation au détriment de mélanger l'image avec la couleur. Installez un double fond constitué d'une image d'arrière-plan et de la couleur souhaitée avec un canal alpha. Après cela, choisissez le mode de mélange le plus approprié et la couleur alpha-canal configurez la composition sur le résultat souhaité.
Contexte: URL ("/ images / img1.jpg"), RGBA (255 255 255,0,9); Mode de fond-mélange: couleur;
Ajout de pseudo-élément
La meilleure façon d'atteindre le souhaité. Créez un pseudo-élément à l'aide de pseudo-classes après. Disponible
#Main: Après (contenu: ""; Affichage: bloc; Position: absolu; Top: 0; gauche: 0; arrière-plan-image: URL (/ wp-contenu / uploads / 2010/11 /tandem.jpg); largeur: 100%; hauteur: 100%; opacité: 0,2; z-index: -1;)
Transparence CSS - Solution de navigateur croisée - 3.8 sur 5 basé sur 6 votes
Dans cette leçon, nous examinerons la transparence CSS, apprendre à donner divers éléments de la transparence de la page et à obtenir un navigateur croisé complet, c'est-à-dire le même travail de cet effet dans divers navigateurs.
Comment définir la transparence de tout élément
Dans CSS3, la propriété Opace est responsable de la création d'éléments transparents, qui peuvent être utilisés pour tous les articles. Cette propriété a des valeurs de 0 à 1, qui déterminent le degré de transparence. Où 0 est la transparence complète (valeur par défaut pour tous les éléments) et 1 opacité complète. Les valeurs sont enregistrées par des fractions: 0,1, 0,2, 0,3, etc.
Exemple d'utilisation:
Transparence du navigateur croisé
Tous les navigateurs ne sont pas aussi perçus et implémentent la propriété opacité ci-dessus. Dans certains cas, il est nécessaire d'utiliser un autre nom de propriété ou filtres.
La propriété de l'opacité CSS3 prend en charge les types suivants de navigateurs Mozilla 1.7 +, Firefox 0.9 +, Safari 1.2 +, Opera 9 +.
Tellement bon :) Le navigateur comme Internet Explorer jusqu'à la version 9.0 ne prend pas en charge la propriété d'opacité et pour créer une transparence de ce navigateur, vous devez utiliser la propriété Filtrer et la valeur alpha (opacité \u003d x), dans laquelle X est un Entier compris entre 0 et 100 avec lequel le niveau de transparence est déterminé. 0 est une transparence complète et 100 est une opacité complète.
Quant au navigateur Firefox vers la version 3.5, il prend en charge la propriété -Moz-opacity au lieu de l'opacité.
Des navigateurs tels que Safari 1.1 et Konqueror 3.1, construits sur le moteur KHTML, utilisent pour contrôler la propriété de transparence: -Khtml-opacité.
Comment définir la transparence dans CSS afin qu'il ressemble à tous les navigateurs de manière égale? Pour créer une solution de navigation croisée pour la transparence des éléments, il faut être prescrit non seulement une propriété d'opacité et l'ensemble de biens suivants:
filtre: alpha (opacité \u003d 50); / * Transparence pour IE * / -MOZ-Opacité: 0.5; / * Support Mozilla 3.5 et ci-dessous * / -KHTML-Opacité: 0.5; / * Support Konqueror 3.1 et Safari 1.1 * / Opacité: 0.5; / * Soutenez tous les autres navigateurs * /
Transparence de divers éléments
Considérez quelques exemples de la tâche de transparence à certains éléments qui sont le plus souvent utilisés sur la page.
Images de transparence CSS.
Considérez plusieurs options pour créer une image translucide. Dans l'exemple suivant, la première image n'est pas spécifiée de transparence, la seconde a la transparence de 50%, les troisième 30%.
Résultat:
Transparence sur CSS lorsque vous planifiez le curseur sur la photo.
Il est souvent nécessaire de faire une image transparente ou tout autre élément au moment où le curseur est induit. Il est possible de le faire avec la pseudo-classe CSS: plancher. Pour cela, notre photo Vous devez enregistrer deux classes une normale - ce sera une condition inactive de la photo et de la deuxième classe avec la pseudolasse: survoler, vous devez spécifier la transparence de l'image au moment du curseur.
Le résultat peut être visualisé dans la démo.
Transparence de fond sur CSS.
Ici, il est nécessaire de rappeler que la transparence s'applique à tous les éléments imbriqués et ne peut pas avoir une plus grande transparence que l'élément attaché.
À titre d'exemple, nous donnons une option avec un fond de page créé à l'aide d'une image et d'un bloc avec un arrière-plan créé avec la couleur et avec une transparence de 50%.
Exemple de code:
Voici le résultat du code affiché ci-dessus:
