Comment définir la couleur transparente en CSS ? Actuellement, il existe 3 façons de procéder.

Méthode 1 - valeur transparente

Si vous définissez la valeur de la couleur du texte ou de l'arrière-plan sur transparent , la couleur sera complètement transparente, c'est-à-dire invisible. Exemple:

Couleur : transparent ;

Ce texte ne sera pas visible sur la page.

Méthode 2 - mode couleur rgba

Et c'est une innovation CSS3. Auparavant, ce mode n'existait pas dans le développement Web, il n'y avait que RVB. Vous savez sûrement comment enregistrer la couleur dans ce format. Pour ce faire, vous devez préciser trois valeurs entre parenthèses de 0 à 255, indiquant la saturation d'une des trois couleurs primaires (rouge, vert, bleu). Par exemple:

Arrière-plan : RVB (230, 121, 156) ;

Le format rgba n'est pas différent, il ajoute simplement une quatrième valeur - le degré de transparence de l'élément de 0 à 1. En général, ce format d'enregistrement est principalement utilisé pour définir une couleur translucide, plutôt que complètement transparente. Pour obtenir une transparence totale, il vous suffit d'écrire 0 comme quatrième valeur.

Arrière-plan : rgba(0, 0, 0, 0);

Dans ce cas, les 3 chiffres restants ne jouent pas de rôle particulier.

Une couleur translucide peut être définie si le quatrième paramètre est défini sur une valeur comprise entre 0,01 et 0,99. J'ai déjà écrit un peu sur la définition de la translucidité de l'arrière-plan dans , vous pouvez le lire si vous êtes intéressé.

Méthode 3 - opacité

Une autre propriété issue de la technologie CSS3. Mais je tiens à vous prévenir tout de suite que cela fonctionne un peu différemment. Avec l'opacité, la transparence est définie sur l'ensemble du bloc auquel elle est appliquée. Ainsi, la lisibilité du texte et la perception des images se détériorent. Je vois donc l'intérêt d'utiliser cette propriété uniquement pour les blocs qui ne contiennent pas de texte ni aucune autre information. Les valeurs peuvent être définies de 0 à 1, comme c'est le cas du quatrième paramètre lors de la spécification d'une couleur au format rgba.

En général, sur ce moment Ce sont toutes les façons que je connais pour définir une couleur transparente en CSS. Pourquoi cela est nécessaire est une autre question. Grâce à un fond transparent, on peut voir ce qui se trouve en dessous. Parfois, cela doit être fait de cette façon par conception. De manière générale, la technique de translucidité est très courante aujourd’hui.

Arrière-plan transparent

Comme vous le savez peut-être, background est une propriété CSS qui vous permet de définir une couleur d'arrière-plan ou de charger une image pour servir d'arrière-plan.

Définir la transparence pour l'arrière-plan CSS

Donc, tout cela se fait très simplement grâce à un format d'enregistrement couleur comme le rgba. Si vous travaillez avec éditeurs graphiques, alors vous savez probablement que le mode de couleur RVB représente cela : la proportion de rouge (rouge), la proportion de vert (vert) et de bleu (bleu). Ainsi, rgba est pratiquement le même, un seul paramètre supplémentaire est ajouté : la transparence. C'est écrit ainsi :

Couleur de fond : rgba (173, 57, 22, 0,5)

Tout d'abord, nous indiquons explicitement que nous définissons la couleur en mode rgba. Ensuite, nous indiquons les valeurs de saturation des trois couleurs primaires de 0 à 255, où 255 est la saturation la plus élevée. Le quatrième paramètre est notre transparence. La valeur de 0 à un est écrite ici. 1 est un élément complètement opaque et 0 est un élément complètement transparent. Par conséquent, si vous définissez 0, alors Couleur de l'arrière plan ne sera pas visible du tout.

Vous savez maintenant comment définir la propriété background sur transparence en CSS. Pour ce faire, vous devez utiliser le mode couleur rgba. Il existe également une propriété d'opacité, mais elle s'applique à l'ensemble de l'élément. Autrement dit, lors de l'application de l'opacité, la transparence peut être appliquée au texte, le rendant illisible.

Exemple de fond transparent

Avantages du sol arrière-plan transparent facile à montrer avec un exemple. Par exemple, nous avons un arrière-plan de page général. Voici à quoi ressemblerait le bloc s’il avait une couleur noire unie :

Maintenant, définissons la même couleur noire pour le bloc, mais spécifions-la en utilisant le format de couleur rgba, en spécifiant la dernière valeur comme 0,7, par exemple. Cela se passera comme ceci :

Désormais, le fond du bloc est translucide et visible à travers celui-ci. image de fond. Cette image et l'arrière-plan sont uniquement à des fins d'illustration. Comme vous pouvez l'imaginer, en CSS, la transparence d'arrière-plan peut s'avérer utile lorsque vous souhaitez que l'arrière-plan d'un élément imbriqué apparaisse sans obscurcir les autres arrière-plans situés sur d'autres calques.

Définir la couleur elle-même à l'aide de rgba n'est pas difficile. Comme déjà évoqué, les trois premières lettres désignent les trois couleurs primaires : rouge, vert et bleu, ou plutôt leur part (de 0 à 255). Prescription différentes significations tu peux gagner des millions Couleurs différentes, et la translucidité vous permettra d'en proposer beaucoup plus beaux effets pour le site, si nécessaire.

Détermine le niveau de transparence d'un élément de page Web. Lorsque l'élément est partiellement ou totalement transparent, l'image d'arrière-plan ou d'autres éléments situés sous l'objet translucide transparaissent.

information brève

Désignations

	Description	Exemple
<тип>	Indique le type de la valeur.	<размер>
UN B	Les valeurs doivent être sorties dans l'ordre spécifié.	<размер> && <цвет>
Un | B	Indique que vous devez sélectionner une seule valeur parmi celles proposées (A ou B).	normale | en minuscule
Un || B	Chaque valeur peut être utilisée indépendamment ou avec d'autres dans n'importe quel ordre.	largeur || compter
	Regroupe les valeurs.	[ récolte || croix ]
*	Répétez zéro ou plusieurs fois.	[,<время>]*
+	Répétez une ou plusieurs fois.	<число>+
?	Le type, le mot ou le groupe spécifié est facultatif.	en médaillon ?
(UN B)	Répétez au moins A, mais pas plus de B fois.	<радиус>{1,4}
#	Répétez une ou plusieurs fois séparées par des virgules.	<время>#

×

Valeurs

La valeur est un nombre de la plage. Une valeur de 0 correspond à la transparence totale de l'élément, 1 au contraire à son opacité. Les nombres fractionnaires de la forme 0,6 définissent la translucidité. Il est permis d'écrire des nombres sans zéro non significatif, comme l'opacité : .6.

bac à sable

Winnie l'ourson n'était toujours pas opposée à un petit rafraîchissement, surtout à onze heures du matin, car à cette heure-là, le petit-déjeuner était terminé depuis longtemps et le déjeuner n'avait pas encore commencé. Et bien sûr, il était terriblement heureux de voir que le Lapin sortait des tasses et des assiettes.

div (opacité : 1 ; )

Exemple

Résultat cet exemple montré sur la fig. 1.

Riz. 1. Résultat de l'utilisation de l'opacité

Modèle objet

Un objet.style.opacité

Note

Firefox jusqu'à la version 3.5 prend en charge la propriété -moz-opacity.

Internet Explorer jusqu'à la version 9.0 utilise des filtres pour modifier la transparence ; pour ce navigateur, vous devez écrire filter : alpha(opacity=50) , où le paramètre d'opacité peut prendre une valeur de 0 à 100.

spécification

Chaque spécification passe par plusieurs étapes d'approbation.

• Recommandation - La spécification a été approuvée par le W3C et est recommandée comme norme.
• Recommandation du candidat ( Recommandation possible ) - le groupe responsable de la norme est convaincu qu'elle atteint ses objectifs, mais a besoin de l'aide de la communauté de développement pour mettre en œuvre la norme.
• Recommandation proposée Recommandation suggérée) - à ce stade, le document est soumis au Conseil consultatif du W3C pour approbation finale.
• Brouillon de travail - Une version plus aboutie d'un brouillon qui a été discuté et modifié pour examen par la communauté.
• Brouillon de l'éditeur ( Projet éditorial) - une version préliminaire de la norme après modifications apportées par les éditeurs du projet.
• Brouillon ( Projet de spécification) - la première version préliminaire de la norme.

×

Avec l'avènement de CSS3, le travail des concepteurs de mise en page est devenu à bien des égards plus simple et plus logique : après tout, vous pouvez désormais configurer de manière vraiment flexible n'importe quel objet, en recourant 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 spécifié par un ensemble d'attributs, background-repeat, background-attachment, background-origin, background-clip, background-color), et chacun d'eux peut être spécifié séparément ou combiné sous l'attribut background. Examinons chacun d'eux plus en détail.

attribut de couleur d'arrière-plan

Même IE8 prend en charge cette méthode. Plusieurs images sont utilisées comme arrière-plan pour une mise en page flexible. L'essentiel est que lorsque vous utilisez une image, n'oubliez pas de spécifier également Couleur CSS arrière-plan, car les utilisateurs peuvent tout simplement ne pas charger l'image.

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 à gauche coin supérieur. L'attribut accepte soit des indications verbales (haut, bas, gauche, droite) ou numériques (pourcentages, pixels et autres unités de mesure). 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 et les distances entre le bas et le haut de l'image sont les mêmes.

attribut taille d'arrière-plan

Parfois requis avec en utilisant CSSétirer l'arrière-plan ou réduire sa taille. Pour ce faire, utilisez l'attribut background-size, et la taille de l'arrière-plan peut être définie soit en pixels, soit en pourcentages, ou dans toute autre unité de mesure.

Il y a quelques problèmes avec cet attribut : afin d'afficher correctement l'arrière-plan dans les versions antérieures des navigateurs, des préfixes doivent être utilisés. Certainement, versions actuelles prennent pleinement 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 image de fond lors du défilement. Ainsi, il peut prendre 3 valeurs (sans tenir compte de l'héritage, qui est commun à tous les attributs présentés dans cet article) :

• fixé— rend l'image immobile sur l'arrière-plan ;
• faire défiler— l'arrière-plan défile avec d'autres éléments ;
• locale— l'image de fond défile si le contenu est défilant. L’arrière-plan qui s’étend au-delà du contenu est corrigé.

Exemple d'utilisation :

corps (fixation d'arrière-plan fixe).

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

attribut d'origine d'arrière-plan

Cet attribut est responsable du positionnement de l'élément. Navigateurs versions précédentes nécessitent l’utilisation de préfixes. La propriété elle-même a trois paramètres :

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

Si plusieurs valeurs sont spécifié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

En règle générale, si l'arrière-plan est donné par une image, celle-ci doit être répétée 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 :

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

Exemple d'utilisation d'attribut :

corps (répétition d'arrière-plan : répétition sans répétition)- similaire répétition d'arrière-plan : répétition-y.

En CSS3, il est possible de définir des valeurs pour plusieurs images si vous listez les paramètres séparés par des virgules.

attribut background-clip

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

• boîte de rembourrage— l'arrière-plan est affiché strictement à l'intérieur du bloc ;
• bordure-boîte- l'image rentre dans le cadre ;
• boîte de contenu— l'image en arrière-plan apparaît uniquement à l'intérieur du contenu.

Exemple d'utilisation :

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

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

Attributs d'opacité et 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 peut être définie entre 0,0 et 1,0 inclus. En parallèle, vous pouvez définir la transparence du fond CSS sans valeur entière : au lieu de 0,3, écrivez simplement .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 inférieur à la version 9, utilisez l'attribut filter :

.block (image d'arrière-plan : url(img.png); filtre : alpha(opacity=30);).

Dans ce cas, la valeur d'opacité est définie dans la plage de 0 à 100. Veuillez noter que l'attribut d'opacité diffère du réglage de la transparence via RGBA en ce sens qu'il est héréditaire : 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.

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

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

Transparence CSS Opacité

Valeur numérique pour opacité défini dans la plage de 0,0 à 1,0, où zéro est une transparence complète et un, au contraire, est une opacité absolue. Par exemple, pour obtenir une transparence de 50 %, vous devez définir la valeur sur 0,5. Il faut garder à l'esprit que opacité se propage à tous les éléments enfants du parent. Cela signifie que le texte sur un fond translucide sera également translucide. Et c'est déjà très inconvénient majeur, le texte ne ressort pas non plus.

La capture d'écran montre clairement que le texte noir est devenu aussi translucide que le fond bleu.

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

Transparence CSS au format RGBA

Format d'enregistrement des couleurs RVBA, est plus alternative moderne pour la propriété opacité. R (rouge), G (vert), B (bleu)- signifie : rouge, vert, bleu. Dernière lettre UN– signifie canal alpha, qui définit la transparence. RVBA Contrairement à Opacité n'affecte pas les éléments enfants.

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

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

à la ligne suivante

Arrière-plan : rgba(2, 127, 212, 0,3) ;

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

Résultat de l'exemple 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 votre site internet. Il est important que ces blocs translucides soient placés sur un motif coloré, comme une photographie. Ce n'est que dans ce cas que l'effet sera perceptible. Cette technique a longtemps été utilisée dans le design, avant même l'avènement de tout CSS3, il a été implémenté uniquement dans des programmes graphiques.

Si le client exige que la mise en page soit correcte dans les anciennes versions du navigateur Internet Explorer, puis ajoutez la propriété filtre et n'oubliez pas de commenter pour que la validité du code ne soit pas affectée.

Conclusion

Format RVBA tout le monde soutient navigateurs modernes, à l'exception de Internet Explorer. Il est également très important que RVBA flexible, il n'agit que sur un élément spécifique spécifié, sans affecter ses enfants. Il est clair que cela est plus pratique pour le maquettiste. Mon choix se porte définitivement en faveur du format RVBA pour obtenir transparence en CSS.

Pour une meilleure consolidation du matériel et une plus grande clarté, je vous propose de passer par là.

Note 1 Note 2 Note 3 Note 4 Note 5

Détails Catégorie : web designer Auteur : SEO & WEB - KELL4

Création d'un fond transparent en HTML et CSS (effets d'opacité et RGBA)

Effet translucide l'élément est clairement visible sur image de fond et s'est répandu dans divers systèmes d'exploitation parce qu'il a l'air élégant et beau. L'essentiel est d'avoir non pas un motif monochromatique sous les blocs translucides, mais une image ; c'est dans ce cas que la transparence devient perceptible.

Cet effet est obtenu différentes façons, y compris des techniques anciennes telles que l'utilisation d'une image PNG comme arrière-plan, la création d'une image en damier et la propriété d'opacité. Mais dès qu'il est nécessaire de réaliser un fond translucide dans un bloc, ces méthodes présentent des inconvénients désagréables.

Examinons la translucidité du texte et de l'arrière-plan - comment l'utiliser correctement dans la conception de sites Web :

La principale caractéristique de cette propriété est que la valeur de transparence affecte tous les éléments enfants qu'elle contient, pas seulement l'arrière-plan. Cela signifie que l'arrière-plan et le texte deviendront translucides. Vous pouvez augmenter le niveau de transparence en modifiant la commande d'opacité de 0,1 à 1.

HTML 5 CSS 3 IE 9

Dans la conception Web, une transparence partielle est également utilisée et est obtenue grâce au format de couleur RGBA, qui est défini uniquement pour l'arrière-plan de l'élément.

Généralement, dans une conception, seul l’arrière-plan d’un élément doit être translucide et le texte doit être opaque pour conserver la lisibilité. La propriété opacity ne convient pas ici car le texte à l'intérieur de l'élément sera également partiellement transparent. Mieux vaut utiliser Format RVBA, dont une partie est le canal alpha ou en d'autres termes la valeur de transparence. La valeur s'écrit rgba, puis les valeurs des composantes de couleur rouge, bleue et verte sont listées entre parenthèses, séparées par des virgules. Le dernier est la transparence, qui est définie entre 0 et 1, 0 signifiant transparence totale et 1 opacité des couleurs - la syntaxe d'utilisation de rgba.

Fond translucide HTML 5 CSS 3 IE 9

L'opacité de l'arrière-plan est définie sur 90 % - arrière-plan semi-transparent et texte opaque.