Faire un fond de CSS translucide. Transparence CSS Fond. Fond transparent ou texte utilisant CSS. Attributs Opacité et filtre
Bonne journée, geeks de développement Web, ainsi que ses débutants. Pour ceux qui ne suivent pas les tendances de la région informatique ou plutôt pour la mode Web, je tiens à vous informer que cette publication sur le sujet: «Comment faire transparent bloc CSS Outils "Vous venez d'être juste à côté. En effet, au cours de l'actuel 2016, la mise en œuvre de divers objets transparents dans les services en ligne est considérée comme élégante.
Par conséquent, dans cet article, je vous dirai de toutes les manières existantes de créer une transparence, allant des solutions de dopage, de faire des accents sur la compatibilité des solutions avec des navigateurs et de donner des exemples spécifiques du code de programme. Maintenant pour le travail!
Méthode 1. Mise à jour
Quand sinon étaient ordinateurs faibles Et non développé "capacités", les développeurs ont créé leur moyen de créer un arrière-plan transparent: en utilisant des pixels transparents à tour de rôle. Ainsi, le bloc créé lors de la mise à l'échelle ressemblait à un échiquier, mais à la taille habituelle, il ressemblait à une certaine transparence.
Ceci, à mon avis, "béquille" aide bien sûr dans les anciennes versions des navigateurs, dans lesquelles des solutions modernes ne fonctionnent pas. Mais il convient de noter que la qualité de l'affichage du texte , inscrit dans de telles chutes.
Méthode 2. Non confus
Dans de rares cas, les développeurs résolvent le problème avec l'introduction d'une image translucide en inserve ... déjà prêtes à translucides images! Cela utilise des images stockées dans le format PNG-24. le format graphique Vous permet de définir 256 niveaux de translucidité.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Cependant, cette méthode n'est pas commode pour plusieurs raisons:
- Internet Explorer. 6 ne fonctionne pas avec une telle technologie, il est nécessaire d'écrire un code de script pour celui-ci;
- Vous ne pouvez pas modifier les couleurs de l'arrière-plan dans CSS;
- Si la fonction d'affichage de l'image est désactivée dans le navigateur, elle disparaîtra.
Méthode 3. Propriété
Le moyen le plus courant et le plus connu de faire n'importe quel bloc transparent est la propriété. opacité.
La valeur de paramètre varie dans la plage, où à 0 l'objet est invisible et à 1 - il est complètement affiché. Cependant, il y a quelques moments désagréables ici.
Tout d'abord, toutes les filiales héritent de la transparence. Et cela signifie que le texte inscrit sera également "déplacer" avec l'arrière-plan.
Deuxièmement, Internet Explorer "grandit son nez" et jusqu'à 8 version ne fonctionne pas avec opacité.
Pour résoudre ce problème utilisé filtre:alpha (Opacité \u003d valeur).
Considérer un exemple.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Méthode 4. Moderne
À ce jour, les professionnels utilisent l'outil RGBA (R, G, B, A).
Avant cela, j'ai dit que RVB est l'un des modèles de couleurs populaires, où R est responsable de toutes les nuances de rouge, g - nuances de vert et de b - nuances de bleu.
En cas de paramètre CSS La variable A est responsable du canal alpha, qui est à son tour responsable de la transparence.
L'avantage principal de la dernière méthode - le canal alpha n'affecte pas les objets dans le bloc stylisé.
rGBA (R, G, B, A) est maintenu à partir de:
- 10 version de l'opéra;
- Internet Explorer 9;
- Safari 3.2;
- 3 versions de Firefox.
Je veux mentionner un fait intéressant! L'explorateur Internet préféré chaud 7 donne une erreur lors de la combinaison de la propriété couleur de l'arrière plan. Avec le nom des couleurs (couleur-couleur: or). Par conséquent, cela vaut la peine d'utiliser:
couleur de fond: RGBA (255, 215, 0, 0.15)
Et maintenant un exemple.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Dans notre magasin, vous trouverez toutes sortes de couleurs.
|
Notez que la teneur en texte du bloc est complètement visible (100% noire), tandis que l'arrière-plan est donné un canal alpha égal à 0,88, c'est-à-dire 88%.
Sur cette publication s'est approchée de la fin. Abonnez-vous à mon blog et n'oubliez pas d'inviter des amis. Je souhaite bonne chance à apprendre des langues Web! Bye Bye!
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 soutiennent la norme Propriété CSS Opacité, qui peut être prise comme valeur du nombre de 0,0 à 1,0, moins la valeur, plus elle est transparente l'élément:
EssayerTransparence en vol stationnaire
Pseudo-classe: Hover vous permet de changer apparence É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:
EssayerFond de transparence
Il y en a deux méthode possible Faire un élément transparent: la propriété d'opacité décrite ci-dessus et indiquant la couleur d'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 arrière-plan et a eu une distribution dans différents systèmes d'exploitationparce qu'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
Résultat cet exemple montré à la Fig. 2. La valeur d'opacité pour l'arrière-plan est définie à 90%.
Figure. 2. Fond translucide et texte opaque
La propriété CSS RGBA vous permet de définir une couleur d'arrière-plan avec un canal alpha (c'est-à-dire des blocs de surcharge par couleur translucide).
Bien sûr, dans CSS, il existe une propriété d'opacité, mais son principal inconvénient: tous les éléments enfants à l'intérieur du bloc transparent hériteront également de sa transparence.
Le plus souvent, le remplissage de l'arrière-plan d'un élément d'un pixel PNG24 et un grand succès de la transparence dans IE6 sont utilisés, ou le fond est transparent à travers l'opacité CSS. Le texte est positionné séparément dans un autre élément, mais à mon avis, n'est pas tout à fait confortable ...
Passant par Rgba La solution ressemble à ceci:
1. Supposons que nous ayons besoin d'un fond bleu avec la transparence de 50%.
Et ne pas supporter ce sera IE6-8, Opera 9.x, Mozilla Firefox. 2.x.
2. Pour IE, vous pouvez essayer de faire plus élégance:
| .Element (arrière-plan: transparent; filtre: PROGID: dximagetransform |
Noter: La couleur dans le filtre est définie sur 8 chiffres. Les 2 premiers chiffres sont le degré de transparence: FF est complètement opaque, 00 est transparent. Les 6 numéros suivants sont la conception HTML habituelle.
L'utilisation de RGBA n'est pas limitée à la couleur de fond des blocs ...
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 avoir noir, vous devez attribuer des indicateurs de tonalité, de saturation et de luminosité zéro valeur - HSLA (0, 0%, 0%, 1). La couleur blanche est obtenue avec une valeur de luminosité 100% HSLA (0, 0%, 100%, 1) et une couleur grise - à une valeur zéro de la saturation de la HSLA (0, 0%, 50%, 1).