CSS transparent. Transparence de l'arrière-plan CSS. Arrière-plan transparent ou texte utilisant CSS. Utiliser des images PNG

Salut tout le monde. 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. CSS3 a également introduit la possibilité de créer des dégradés radiaux, mais c'est un sujet pour un article séparé. Dans celui-ci, je voulais vous expliquer comment définir la transparence de la propriété background en CSS.

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 des éditeurs graphiques, vous savez probablement que le mode couleur RVB signifie : 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 le définissez sur 0, la couleur d'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

Les avantages d’un fond translucide sont faciles à démontrer à l’aide d’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, l'arrière-plan du bloc est visible à travers celui-ci et l'image d'arrière-plan est visible à travers lui. Cette image et cet arrière-plan sont uniquement à titre d'exemple. 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). En définissant différentes valeurs, vous pouvez obtenir des millions de couleurs différentes, et la translucidité vous permettra de créer des effets bien plus beaux pour le site, si nécessaire.

Vlad Merjevitch

La transparence partielle, lorsqu’elle est utilisée correctement, est très impressionnante dans la conception de sites Web. L'essentiel est que sous les blocs translucides il n'y a pas un dessin monochromatique, mais une image, c'est dans ce cas que la transparence devient perceptible. Cet effet est obtenu de plusieurs manières, et si vous vous souvenez de toutes, y compris des méthodes à l'ancienne, il s'agit d'utiliser une image PNG comme arrière-plan, de créer une image en damier et de posséder 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 un inconvénient désagréable. Je vais faire une brève revue pour clarifier de quoi nous parlons, ainsi que pour les lecteurs qui ne sont pas familiers avec les options non traditionnelles pour créer un effet translucide.

PNG comme arrière-plan

DANS éditeur graphique Un motif translucide monochrome est pré-préparé et enregistré au format PNG-24 (Fig. 1). Une particularité de ce format est qu'il prend en charge 256 niveaux de transparence, ou tout simplement, il peut afficher des images translucides.

Riz. 1. Image pour créer l'arrière-plan

Ensuite, nous ajoutons l'image comme arrière-plan via la propriété background, comme le montre l'exemple 1.

Exemple 1 : Utiliser un motif translucide

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Riz. 2. Appliquer une image d'arrière-plan

Navigateur obsolète Internet Explorer 6 ne fonctionne pas avec la translucidité en PNG-24, si pour une raison quelconque vous devez prendre en charge ce navigateur, vous devrez utiliser des scripts pour cela.

La méthode ci-dessus présente un certain nombre de limites. Ainsi, lorsque vous désactivez les images dans le navigateur, l'arrière-plan disparaît complètement. De plus, il n'est pas si simple de modifier la couleur d'arrière-plan et la valeur de transparence ; pour ce faire, vous devrez à nouveau modifier l'image.

Image à carreaux

Cette méthode fait référence à des méthodes complètement anciennes de mise en œuvre de la translucidité, lorsque les navigateurs « ne pouvaient rien faire » et qu'il fallait rechercher des solutions non standard. L'astuce consiste à créer une image qui alterne entre des pixels transparents et opaques (Figure 3). Cette structure régulière crée un effet translucide, l'imitant essentiellement.

Riz. 3. Damier agrandi

Voilà à quoi cela ressemble au final (Fig. 4).

Riz. 4. Simuler la translucidité

Les inconvénients de cette méthode sont comparables à la précédente : un motif de moiré peut également apparaître et le texte se détériorera.

Propriété d'opacité

La propriété CSS 3 opacity spécifie la valeur d'opacité et va de 0 à 1, où zéro est la transparence complète de l'élément, et un, au contraire, est opaque. La propriété opacity a une fonctionnalité spéciale : la transparence s'applique à tous les éléments enfants et ils ne peuvent pas dépasser la valeur d'opacité de leur parent. Il s'avère qu'il ne peut pas y avoir de texte opaque sur un fond translucide (exemple 2).

Exemple 2 : Utiliser l'opacité

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Le résultat de l'exemple est présenté sur la Fig. 5.

Riz. 5. Translucidité du texte et du fond

Dans les versions d'Internet Explorer jusqu'à la version 8.0 incluse, l'opacité ne fonctionne pas, elle utilise donc la propriété de filtre spécifique au navigateur. Naturellement, cela entraîne un code CSS invalide.

RVBA

L'approche moderne est beaucoup plus simple et visuelle que les méthodes ci-dessus et consiste à utiliser le format RGBA pour les couleurs et les arrière-plans. Les trois premières lettres sont familières à beaucoup et représentent le rouge, le vert, le bleu (rouge, vert, bleu), la dernière symbolise le canal alpha et définit la transparence de l'élément. Le format d'enregistrement est le suivant.

couleur d'arrière-plan : rgba(r, g, b, a);

Entre parenthèses, au lieu de lettres, la valeur du composant de couleur est placée ; elle peut être visualisée dans n'importe quel éditeur graphique ; la dernière valeur définit la transparence et coïncide avec la valeur de la propriété d'opacité.

Tous les navigateurs ne supportent pas ce format : Internet Explorer depuis la version 9, Opera depuis la version 10, Firefox depuis la version 3, Safari depuis la version 3.2. Mais en général, navigateurs modernes afficher correctement la transparence. Pour les anciennes versions d'IE, vous pouvez spécifier séparément la couleur dans son format habituel et, bien sûr, il n'y aura pas de transparence. Ou utilisez à nouveau la propriété filter, mais vous devrez alors accepter le fait que la transparence affectera également le texte (exemple 3). Pour maintenir un code CSS valide, j'ai utilisé des commentaires conditionnels.

Exemple 3 : Utilisation de RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Le résultat de l'exemple peut être vu sur la Fig. 6.

Riz. 6. Fond translucide avec texte opaque

Comparez l'image avec la précédente, les lettres sont devenues plus lumineuses et plus claires.

DANS navigateur Internet Explorer 7 a découvert un bug lors de la combinaison de la couleur d'arrière-plan avec différentes valeurs. Par exemple, si vous définissez la couleur d'arrière-plan sur rouge, comme indiqué ci-dessous, l'arrière-plan n'apparaîtra pas du tout dans IE7.

Div ( couleur d'arrière-plan : rouge ; /* Non applicable dans IE7 */ couleur d'arrière-plan : rgba(255, 0, 0, 0.5); )

Ceci est résolu en remplaçant la propriété background-color par background .

Div ( background: red; /* Et cela fonctionne */ background: rgba(255, 0, 0, 0.5); ) Cependant, il y a une mise en garde. Le validateur CSS se plaint de l'arrière-plan lorsqu'il reçoit une valeur au format RGBA. Mais en même temps, il fait correctement référence à background-color . En général, comme toujours, il faut choisir entre les navigateurs et la validité.

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. Plus important encore, lorsque vous utilisez une image, n'oubliez pas de définir également la couleur d'arrière-plan en CSS, car les utilisateurs risquent tout simplement de 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 dans le coin supérieur gauche. 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 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 l'image d'arrière-plan 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. Les premiers navigateurs nécessitent des 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 des nombreux paramètres suivants :

• 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 à l'aide de RGBA par hérédité : 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 gros problème pour tous les concepteurs de sites Web réside dans les anciennes versions d'IE : elles 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 Propriété CSS. 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.

La transparence de l'arrière-plan du site est créée grâce aux propriétés CSS. Vous pouvez obtenir la transparence de deux manières : via la propriété opacity et background:rgba(). Examinons chacun d'eux, puis faisons une comparaison.

1. Propriété d'opacité CSS pour la transparence de l'arrière-plan

CSS possède la propriété opacity, qui peut être utilisée pour définir la transparence des images, des textes, y compris des arrière-plans.

La transparence peut être définie simplement en spécifiant nombre réel de 0,0 à 1,0. Plus le chiffre est bas, moins l’objet sera visible.

opacité : 0,5 ; // Translucidité opacité : 0,2 ; // L'objet n'est visible qu'à 20% opacité : 0,8 ; // L'objet n'est visible qu'à 80%

Regardons un exemple avec la propriété opacité.

Текст также прозрачный

Этот код преобразуется на странице в следующее:

Текст также прозрачный

2. Прозрачность через свойство CSS background:rgba()

Вторым вариантом задания прозрачности фона на сайте является свойство CSS background:rgba. Рассмотрим пример

Текст также прозрачный

Этот код преобразуется на странице в следующее.

Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).

Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.

Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…

С помощью RGBa решение выглядит следующим образом:

1. Допустим, нам нужен синий фон с прозрачностью 50%.

А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x

2. Для IE можно постараться и сделать более изящно:

Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF - полностью непрозрачный, 00 - прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.

Использование RGBa не ограничивается только фоновым цветом у блоков…