Comment définir l'opacité d'arrière-plan dans CSS

La configuration des arrière-plans dans les applications Web est une opération courante qui attire les yeux de l'utilisateur. Cependant, parfois cela pourrait conduire à une grande distraction. Pour éviter une telle situation, les développeurs Web rendent leurs arrière-plans transparents en appliquant l'opacité ou en utilisant des propriétés alternatives de l'opacité CSS.

Dans ce guide, nous couvrirons comment définir l'opacité d'arrière-plan dans CSS.

Comment définir l'opacité d'arrière-plan dans CSS?

Dans CSS, l'opacité de l'arrière-plan se rapporte aux termes suivants:

• • Opacité de l'image d'arrière-plan
  • Opacité de couleur d'arrière-plan

Nous allons maintenant expliquer les deux individuellement!

Comment définir l'opacité de l'image d'arrière-plan dans CSS?

Le "opacité»La propriété peut être utilisée pour rendre les images transparentes en arrière-plan ou n'importe où sur la page Web. Les textes et les couleurs d'arrière-plan peuvent également être rendus transparents avec l'utilisation de cette propriété.

Consultez l'exemple détaillé fourni pour en savoir plus sur le réglage de l'image de l'arrière-plan Opacité dans CSS.

Exemple

Actuellement, nous avons une image qui est définie en arrière-plan de notre conteneur:

Dans notre fichier HTML, nous avons ajouté une balise avec le "my-iMg”ID dans la section du corps:

Pour définir l'opacité de l'image d'arrière-plan, nous devons styliser notre élément d'image. Pour ce faire, utilisez le «#"Avant que je sois nommé"my-iMg" comme "# my-iMg"Pour le styler. Comme l'image sera utilisée dans l'arrière-plan du conteneur sélectionné, donnez de l'espace au conteneur à l'aide de «rembourrage" de "15%". Dans l'étape suivante, définissez l'image en arrière-plan en utilisant le «arrière-plan" propriété; spécifie le "sans répétition"Valeur le long"URL ()«Valeur pour éviter la répétition de l'image. Enfin, définissez l'opacité comme valeur "0.2"Ou selon vos préférences:

Maintenant, enregistrez le code et ouvrez le fichier HTML dans le navigateur. Dans notre cas, nous l'ouvrirons avec l'aide du «Serveur en direct»:

Ici, l'opacité sur notre image a été appliquée avec succès:

Dirigeons-nous vers la section suivante!

Comment définir l'opacité de la couleur d'arrière-plan dans CSS?

Il y a toujours des chances de trouver des couleurs solides ou dégradées dans l'arrière-plan du site Web. Pour l'opacité des couleurs d'arrière-plan, nous utiliserons the "Couleur de l'arrière plan" propriété. Cette propriété aide à configurer la couleur d'arrière-plan; Cependant, il peut également être utilisé pour définir l'opacité des couleurs d'arrière-plan ou les rendre transparentes.

Regardez l'exemple ci-dessous pour l'utilisation de la propriété indiquée.

Exemple 1: Utilisation de la propriété en arrière-plan pour définir une opacité d'image

Dans cet exemple, la couleur d'arrière-plan de notre page Web est orange, et nous devons définir son opacité:

Pour ce faire, nous utiliserons le code couleur hexadécimal avec le «Couleur de l'arrière plan" propriété. À l'aide d'une couleur hexagonale spécifique, nous appliquerons l'opacité à la couleur d'arrière-plan:

Note: Changer le "# 00000020«Valeur à«# 00000000«Rendra votre arrière-plan complètement transparent.

Enregistrez le code en appuyant sur "Ctrl + s»Et ouvrez-le avec le serveur en direct:

Sortir

Maintenant, prenons un autre exemple intéressant de régler l'opacité de couleur d'arrière-plan dans CSS.

Exemple 2: Utilisation de la propriété de couleur arrière pour rendre une image transparente

Dans cet exemple, nous utiliserons le «arrière-plan«Propriété et définissez sa valeur sur«transparent". En conséquence, l'arrière-plan sera transparent mais toujours une partie du conteneur:

Ici, nous pouvons voir le fond totalement transparent:

Pour la vérification, inspectez les éléments ajoutés dans le conteneur:

Nous avons livré les moyens les plus simples de définir l'opacité d'arrière-plan.

Conclusion

Pour définir l'opacité d'arrière-plan, utilisez le «opacité","Couleur de l'arrière plan", ou "arrière-plan" propriété. L'opacité fournit un contrôle sur le réglage de l'arrière-plan opacité. La propriété en couleur d'arrière-plan peut aider à appliquer la transparence des arrière-plans via le code couleur hexiste, tandis que la propriété d'arrière-plan est simple; Le régler sur transparent fera disparaître l'arrière-plan. Dans cet article, nous avons démontré comment définir l'opacité de l'arrière-plan dans CSS.