En développement Web, vous pouvez souvent ressentir le besoin d'ajouter des arrière-plans transparents. La recherche de la propriété de fond transparent dans CSS ne vous donnera aucun résultat car il n'y a pas une telle propriété transparente. Cependant, vous pouvez utiliser des propriétés alternatives ou le code couleur transparent dans le même but.

Dans ce blog, nous apprendrons à définir la couleur de fond transparent dans CSS.

Comment définir la couleur d'arrière-plan transparent dans CSS?

Pour définir la couleur d'arrière-plan transparent, nous allons utiliser les méthodes suivantes:

• propriété de couleur arrière
• propriété d'opacité

Passons par chaque méthode une par une!

Méthode 1: Utilisation de la couleur d'arrière-plan pour définir une couleur d'arrière-plan transparente dans CSS

Dans CSS, le «Couleur de l'arrière plan»La propriété est utilisée pour attribuer une couleur différente à l'arrière-plan. De plus, l'utilisation de la propriété de couleur arrière d'une manière spécifique peut également définir la transparence des différents éléments.

Exemple

Voici notre page HTML avec deux arrière-plans, l'un comme image et l'autre comme arrière-plan du conteneur. Nous voulons rendre le fond du conteneur transparent afin que nous puissions voir à travers l'image ajoutée en raison de la transparence du conteneur:

Dans notre fichier HTML, nous avons ajouté un "

"Tag avec une classe nommée"bg«À l'intérieur d'un élément div et le placé à l'intérieur du«" étiqueter:

Transparent

Dans le fichier CSS, utilisez le "." avant "bg"Pour le déclarer comme une classe. Ensuite, ajoutez la propriété en couleur en arrière-plan avec la valeur RGBA, affectez le «100px”Un rembourrage et définissez la couleur du texte comme«blanc". Comme le schéma de couleurs RGBA a son format approprié, nous définirons toutes ses valeurs à zéro sauf la dernière. Définissez la dernière valeur sur ".25«Pour obtenir une nuance de transparence. Cependant, il peut être remplacé par "0«Avoir une nuance de transparence claire.

Dans l'étape suivante, attribuez à la div un rembourrage "200px»Et définissez l'URL de l'image d'arrière-plan souhaitée:

Note: Nous n'avons pas supprimé la couleur d'arrière-plan précédemment définie comme «aqua". En conséquence, le fond transparent du conteneur sera clairement visible en utilisant le schéma de couleurs RGBA.

Comme vous pouvez le voir, nous avons réussi à définir une couleur d'arrière-plan transparente à l'aide de la propriété de couleur arrière.

Maintenant, vérifions la méthode d'utilisation d'une autre propriété CSS pour définir une couleur d'arrière-plan transparente.

Méthode 2: Utilisation de la propriété Opacity pour définir une couleur d'arrière-plan transparent dans CSS

Dans CSS, le «opacité»La propriété est utilisée pour rendre les éléments transparents. Cependant, il existe toujours des niveaux de transparence qui peuvent être spécifiés, comme 1 à 100 (%). Par exemple, un élément avec «0«L'opacité sera complètement transparente.

Exemple 1

Dans cet exemple, nous attribuerons le «0.2«Valeur d'opacité au«.bg" classe. Toutes les autres propriétés resteront la même:

Ici, nous avons réussi à définir le fond transparent:

Cependant, le réglage de l'opacité a également appliqué l'effet de transparence au texte ajouté. Pour aborder un tel scénario, prenons un autre exemple.

Exemple 2

Lorsque vous attribuez une valeur d'opacité, il est appliqué à chaque élément du conteneur spécifié ayant la même classe. Cependant, la modification de la classe du texte ajouté peut résoudre le problème déclaré.

Pour ce faire, nous affecterons la classe "texte" pour

Tag et classe "bg«À la balise:

Transparent

Maintenant le "Transparent"Le texte appartient à une classe différente".texte". Donc, nous spécifierons son «position"Et donnez-lui la valeur"absolu», Attribuez le«marge«Valeur de la propriété comme«-9%" et "marge-gauche«Valeur comme«50px«Pour obtenir le texte sur la boîte:

.texte
Position: absolue;
marge: -9%;
marge-gauche: 50px;
Couleur blanche;

On peut voir que maintenant l'opacité n'est appliquée qu'au conteneur pour le rendre transparent sans modifier le texte ajouté:

Nous avons fourni les moyens les plus simples de définir la couleur de fond transparent dans CSS.

Conclusion

Pour définir une couleur d'arrière-plan transparente dans CSS, vous pouvez utiliser le «Couleur de l'arrière plan»Propriété avec la valeur RGBA et le«opacité" propriété. La propriété de couleur arrière peut être utilisée deux fois, une pour définir l'arrière-plan d'origine et la seconde pour rendre le premier transparent en utilisant le schéma de couleurs RGBA. Cependant, la valeur de la propriété d'opacité est appliquée à tous les éléments de la classe spécifique pour laquelle il est défini. Dans cet article, nous avons couvert deux méthodes efficaces pour définir la couleur de fond transparent dans CSS.