Couleur et arrière-plan transparents en CSS

/* 06.07.2006 */

Transparence CSS (opacité css, opacité javascript)

L’effet de transparence est le sujet de cet article. Si vous souhaitez apprendre à rendre transparents les éléments d'une page HTML à l'aide de CSS ou de Javascript, et à obtenir une compatibilité entre navigateurs (même expérience dans différents navigateurs) en prenant en compte les navigateurs Firefox, Internet Explorer, Opera, Safari, Konqueror, alors vous sont les bienvenus. De plus, examinons une solution toute faite pour modifier progressivement la transparence à l'aide de javascript.

Opacité CSS (transparence CSS) Symbiose d'opacité CSS

Par symbiose, j'entends combiner différents styles pour différents navigateurs dans une seule règle CSS pour obtenir l'effet souhaité, c'est-à-dire pour implémenter la compatibilité entre navigateurs.

Filtre :progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5,5+*/ -moz-opacité : 0,5 ; /* Mozilla 1.6 et versions antérieures */ -khtml-opacity : 0,5 ; /* Konqueror 3.1, Safari 1.1 */ /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

En fait, les première et dernière règles sont nécessaires, pour IE5.5+ et les navigateurs qui comprennent l'opacité CSS3, et les deux règles du milieu ne font évidemment aucune différence, mais elles n'interfèrent pas vraiment non plus (décidez vous-même si vous en avez besoin).

Symbiose d'opacité Javascript

Essayons maintenant de définir la transparence via un script, en tenant compte des fonctionnalités des différents navigateurs décrites ci-dessus.

Function setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // S'il n'y a aucun élément avec l'identifiant spécifié ou le navigateur ne prend en charge aucune des fonctions connues de contrôle de la transparence if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Si la transparence est déjà définie, modifiez-la via la collection de filtres , sinon ajoutez de la transparence via style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity else elem.style.filter += " progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Afin de ne pas écraser d'autres filtres, utilisez "+=" ) else // Autres navigateurs elem.style = nOpacity; ) function getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // Conforme CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) renvoie "opacity" ;

else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 et versions antérieures, Firefox 0.8 renvoie "MozOpacity" ;

sinon if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 renvoie "KhtmlOpacity" ;

sinon if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ renvoie "filtre" ;

On pourrait se demander pourquoi ne pas définir la transparence en attribuant (=) à la propriété elem.style.filter = "..."; ? Pourquoi "+=" est-il utilisé pour ajouter la propriété filter à la fin de la chaîne ? La réponse est simple, afin de ne pas « écraser » les autres filtres. Mais en même temps, si vous ajoutez un filtre de cette manière une deuxième fois, il ne modifiera pas les valeurs précédemment définies de ce filtre, mais sera simplement ajouté à la fin de la ligne de propriété, ce qui n'est pas correct. Par conséquent, si un filtre est déjà installé, alors vous devez le manipuler via la collection de filtres appliqués à l'élément : elem.filters (mais gardez à l'esprit que si le filtre n'a pas encore été attribué à l'élément, alors il est impossible pour le gérer à travers cette collection). Les éléments de collection sont accessibles soit par nom de filtre, soit par index. Cependant, le filtre peut être spécifié dans deux styles, le style court IE4 ou le style IE5.5+, qui est pris en compte dans le code.

Changer en douceur la transparence d'un élément

Solution prête. Nous utilisons la bibliothèque opacity.js

img ( filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // Créez une règle pour modifier la transparence : définissez le nom de la règle, le début et la fin de la transparence, comme ainsi qu'un paramètre facultatif de retard affectant la vitesse de changement de transparence fadeOpacity.addRule("oR1", .3, 1, 30); fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/sweet_cherry.jpg" width="98" height="97" />

Étapes de base :

Nous connectons la bibliothèque de fonctions ;

Nous définissons les règles en utilisant la méthode fadeOpacity.addRule() ;

Nous appelons la méthode fadeOpacity() pour changer la transparence de la valeur initiale à la valeur finale, ou fadeOpacity.back() pour revenir à la valeur initiale du niveau de transparence.

Mâchons

Je pense que comment connecter la bibliothèque ressort clairement de l'exemple ci-dessus. Cela vaut maintenant la peine d’expliquer la définition des règles. Avant d'appeler des méthodes pour changer de transparence en douceur, vous devez définir les règles selon lesquelles le processus sera effectué : vous devez déterminer la transparence initiale et finale, et également, si vous le souhaitez, spécifier un paramètre de délai qui affecte la vitesse de changement de transparence. processus.

Les règles sont définies à l'aide de la méthode fadeOpacity.addRule

Syntaxe : fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Arguments :

• sRuleName - nom de la règle, défini arbitrairement ;
• nStartOpacity et nFinishOpacity - transparence de début et de fin, nombres compris entre 0,0 et 1,0 ;
• nDelay - délai en millisecondes (argument facultatif, la valeur par défaut est 30).

Nous appelons la transparence elle-même via les méthodes fadeOpacity(sElemId, sRuleName), où sElemId est l'identifiant de l'élément et sRuleName est le nom de la règle. Pour ramener la transparence à son état d'origine, utilisez la méthode fadeOpacity.back(sElemId).

: survolez pour modifier facilement la transparence

Je noterai également que pour un simple changement de transparence (mais pas un changement progressif), le pseudo-sélecteur :hover convient parfaitement, qui permet de définir des styles pour un élément lorsque vous passez la souris dessus.

a:hover img ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity : 0,3 ; -khtml-opacity : 0,3 ; opacité : 0,3 ; )

Veuillez noter que l'image est placée à l'intérieur de l'élément A. Le fait est qu'Internet Explorer jusqu'à la version 6 ne comprend le pseudo-sélecteur:hover que par rapport aux liens, et non à aucun élément, comme cela devrait être le cas en CSS (la situation a été corrigé dans IE7) .

Transparence et texte irrégulier dans IE

Avec la sortie de Windows XP, l'anticrénelage cleartype des polices d'écran est apparu, et avec lui les effets secondaires dans IE lors de l'utilisation de cette méthode d'anticrénelage. Concernant notre cas, si la transparence est appliquée à un élément avec du texte lorsque la méthode d'anticrénelage ClearType est activée, alors le texte cesse de s'afficher normalement (le texte en gras, par exemple, est en double, divers artefacts peuvent également apparaître, par exemple, en forme de tirets, texte irrégulier). Afin de corriger la situation, pour IE, vous devez définir la couleur d'arrière-plan, la propriété CSS background-color , sur l'élément auquel la transparence est appliquée. Heureusement, le bug a été corrigé dans IE7.

Transparence CSS - solution multi-navigateurs - 3,8 sur 5 basé sur 6 votes

Dans cette leçon, nous examinerons la transparence CSS, apprendrons comment donner de la transparence à divers éléments de page et atteindre une compatibilité totale entre navigateurs, c'est-à-dire que cet effet fonctionnera de la même manière dans différents navigateurs.

Comment définir la transparence de n'importe quel élément

En CSS3, la propriété opacity est chargée de créer des éléments transparents, qui peuvent être appliqués à n'importe quel élément. Cette propriété a des valeurs de 0 à 1, qui déterminent le degré de transparence. Où 0 correspond à une transparence totale (la valeur par défaut pour tous les éléments) et 1 à une opacité totale. Les valeurs sont écrites sous forme de fractions : 0,1, 0,2, 0,3, etc.

Exemple d'utilisation :

Transparence .im ( filtre : alpha(Opacity=50); -moz-opacity : 0,5 ; -khtml-opacity : 0,5 ; opacité : 0,5 ; )

Transparence entre navigateurs

Tous les navigateurs ne perçoivent pas et n’implémentent pas la propriété d’opacité ci-dessus de la même manière. Dans certains cas, il est nécessaire d'utiliser un nom de propriété ou des filtres différents.

La propriété d'opacité CSS3 est prise en charge par les types de navigateurs suivants : Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Tellement bien :) un navigateur comme Internet Explorer jusqu'à la version 9.0 ne prend pas en charge la propriété opacité et pour créer de la transparence pour ce navigateur, vous devez utiliser la propriété filter et la valeur alpha(Opacity=X), dans laquelle X est un entier dans la plage de 0 à 100, qui détermine le niveau de transparence. 0 est complètement transparent et 100 est complètement opaque.

Depuis Firefox avant la version 3.5, il prend en charge la propriété -moz-opacity au lieu de l'opacité.

Les navigateurs tels que Safari 1.1 et Konqueror 3.1, construits sur le moteur KHTML, utilisent la propriété -khtml-opacity pour contrôler la transparence.

Comment définir la transparence en CSS pour qu'elle soit identique dans tous les navigateurs ? Pour créer une solution multi-navigateurs pour la transparence des éléments, ils doivent spécifier non seulement une propriété d'opacité, mais l'ensemble de propriétés suivant :

filtre : alpha (Opacité = 50 ); /* Transparence pour IE */ -moz-opacity : 0,5 ; /* Prend en charge Mozilla 3.5 et versions antérieures */ -khtml-opacity : 0.5 ; /* Prend en charge Konqueror 3.1 et Safari 1.1 */ opacité : 0,5 ; /* Prend en charge tous les autres navigateurs */

Transparence des différents éléments

Examinons quelques exemples de définition de la transparence sur certains éléments les plus souvent utilisés sur la page.

Transparence des images CSS.

Examinons plusieurs options pour créer une image translucide. Dans l'exemple suivant, la première image n'a pas de transparence définie, la seconde a une transparence de 50 % et la troisième en a 30 %.

Transparence .im1 ( filtre : alpha(Opacity=50); -moz-opacity : 0,5 ; -khtml-opacity : 0,5 ; opacité : 0,5 ; ) .im2 ( filtre : alpha(Opacity=30); -moz-opacity : 0,3 ; -khtml-opacité : 0,3 ;

Résultat:

Transparence en CSS au survol d'une image.

Il est souvent nécessaire de rendre transparent une image ou tout autre élément au moment où le curseur le survole. Vous pouvez le faire en utilisant la pseudo-classe CSS : hover. Pour ce faire, notre image doit se voir attribuer deux classes, une normale - ce sera l'état inactif de l'image et la deuxième classe avec la pseudo-classe : survolez, ici vous devez spécifier la transparence de l'image pour le moment de survoler le curseur.

Transparence .im1 ( filtre : alpha(Opacity=100); -moz-opacity : 1 ; -khtml-opacity : 1 ; opacité : 1; ) .im1:hover ( filtre : alpha(Opacity=50); -moz-opacity : 0,5; -khtml-opacité : 0,5 ; opacité : 0,5 ; ) .im2 ( filtre : alpha(Opacité=30); -moz-opacité : 0,3 ; -khtml-opacité : 0,3 ; opacité : 0,3 ; ) .im2 : survol ( filtre : alpha(Opacity=100); -moz-opacity : 1 ; -khtml-opacity : 1 ; opacité : 1; )

Vous pouvez voir le résultat dans la démo.

Transparence d'arrière-plan à l'aide de CSS.

Ici, il faut se rappeler que la transparence s'applique à tous les éléments imbriqués et qu'ils ne peuvent pas avoir une plus grande transparence que l'élément imbriqué.

A titre d'exemple, nous donnerons une variante avec un fond de page créé à partir d'une image et un bloc avec un fond créé à l'aide de couleur et ayant une transparence de 50%.

Exemple de code :

CORPS de transparence ( arrière-plan : url(bg.png); /* Image en arrière-plan */ ) .blok ( arrière-plan : #FC0; /* Couleur d'arrière-plan */ remplissage : 5px; /* Remplissage */ couleur : #000000; /* Couleur du texte */ filtre : alpha(Opacité=50) ; -moz-opacité : 0,5 ; -khtml-opacité : 0,5 ;

Voici le résultat du code posté ci-dessus :

Vlad Merjevitch

La transparence partielle, lorsqu’elle est utilisée correctement, est très impressionnante dans la conception d’un site 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 peut être obtenu de différentes manières, y compris les méthodes anciennes consistant à utiliser une image PNG comme arrière-plan, à créer une image en damier et à utiliser 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 ferai 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 l'éditeur graphique, un dessin translucide monochrome est d'abord préparé, qui est 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

Transparence dans le calque BODY ( background: url(images/star.png); /* Image d'arrière-plan */ ) .semiopacity ( remplissage : 5px; /* Marges autour du texte */ background: url(images/opacity.png); /* Fond translucide */ )

Le résultat de cet exemple est présenté sur la Fig. 3.

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

L'ancien navigateur 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 celui-ci.

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

Transparence dans le calque BODY ( background: url(images/star.png); /* Image d'arrière-plan */ ) .semiopacity ( background: #0078c9; /* Couleur d'arrière-plan */ padding: 5px; /* Marges autour du texte */ opacité : 0,7; /* Fond translucide */ filter: alpha(Opacity=70); /* Transparence dans IE */ color: #fff; /* Couleur du texte */ ) Le champ magnétique, cela a été déterminé par la nature du spectre. , suit la météorite spatiale, Ce jour tombait le vingt-sixième jour du mois Carneia, que les Athéniens appellent Metagitnion.

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

Riz. 5. Translucidité du texte et du fond

Dans 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 des 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, les navigateurs modernes affichent 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

Corps d'arrière-plan translucide ( background: url(images/star.png); /* Arrière-plan de la page Web */ ) .transparent ( background-color: rgba(0, 120, 201, 0.7); /* Couleur d'arrière-plan et valeur de transparence * / padding: 10px; /* Marges autour du texte */ color: #fff; /* Couleur du texte */ .transparent ( background-color: #0078c9; filter: alpha(Opacity=70); /* Transparence dans IE */ ) A une gigantesque spirale stellaire d'un diamètre de 50 kpc, ceci a été établi par la nature du spectre, illustre parfaitement la pluie de météores, cependant, Don Yemans n'a inclus que 82 grandes comètes dans la liste.

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.

Un bug a été découvert dans Internet Explorer 7 lors de la combinaison de background-color 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é.

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, pour le 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.

Fond 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 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 dans son ensemble. 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

L'effet translucide d'un élément est clairement visible dans l'image d'arrière-plan et s'est répandu dans divers systèmes d'exploitation car il est élégant et beau. Dans la conception Web, la translucidité est également utilisée et est obtenue grâce à la propriété d'opacité ou au format de couleur RGBA défini pour l'arrière-plan.

Bloc de dégradé

Réalisez le bloc montré sur la Fig. 1. Le bloc contient un cadre dégradé translucide avec un fond dégradé sous le titre et un petit pointeur. L'arrière-plan de la page est fourni uniquement pour la clarté de l'effet de translucidité ; vous pouvez indiquer n'importe quelle image de votre choix. La hauteur minimale du bloc est de 100 px.

Comment rendre un calque semi-transparent ?

Pour modifier le degré de transparence d'un élément, utilisez la propriété de style opacité avec une valeur de 0 à 1, où 0 correspond à une transparence totale, et 1, au contraire, à l'opacité de l'objet. Cette propriété ne fonctionne pas dans Internet Explorer, vous devez donc utiliser un filtre spécifiquement pour elle, une propriété qui ne fait pas partie de la spécification CSS. L'exemple 1 montre comment définir la transparence des calques pour tous les navigateurs.

Fond translucide

Vlad Merjevitch

La transparence partielle, lorsqu’elle est utilisée correctement, est très impressionnante dans la conception d’un site 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 peut être obtenu de différentes manières, y compris les méthodes anciennes consistant à utiliser une image PNG comme arrière-plan, à créer une image en damier et à utiliser 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 ferai 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.

Comment faire en sorte qu'un tableau soit translucide, mais que certaines cellules ne le soient pas ?

Pour changer la transparence d'un élément, CSS3 fournit la propriété opacity, sa valeur peut varier de 0 à 1. Zéro correspond à la transparence totale de l'élément, et un, au contraire, à l'opacité. Les navigateurs modernes fonctionnent assez correctement avec cette propriété, à l'exception du navigateur Internet Explorer, vous devez donc utiliser une propriété de filtre spéciale avec la valeur alpha(Opacity=X) , où X peut varier de 0 à 100.