Comment définir la transparence et l'opacité en CSS

CSS est un langage de feuille de style largement utilisé, principalement utilisé pour ajouter des styles à des fichiers tels que HTML, XHTML et XML. En CSS, la transparence contrôle l'opacité d'un élément afin de créer un effet visuel en changeant les couleurs et en mélangeant les éléments. Dans cet article, nous verrons comment utiliser la transparence et l'opacité en CSS.

Transparence

La transparence est le degré d'opacité ou de visibilité d'un élément. Cette propriété est définie par « opacité » en CSS et varie d'un nombre compris entre 0 et 1. Un élément avec une transparence de 0 ne sera pas visible, tandis qu'une transparence de 1 rendra l'élément complètement opaque. De plus, vous pouvez utiliser une valeur décimale, telle que 0,5, pour obtenir un degré de transparence compris entre totalement transparent et totalement opaque. Voici un exemple :

div {
    opacity: 0.5;
}

Dans cet exemple, l'élément "div" ne sera vu que dans son état semi-transparent, soit une opacité de 50 %.

Exemples d'application de transparence :

• Changez les couleurs unies en couleurs translucides pour améliorer la conception de l'interface utilisateur. Pendant le processus de conception, vous pouvez utiliser des couleurs translucides pour améliorer le contraste entre les éléments et les rendre plus lisibles.
• Utilisé pour la conversion de l'image d'arrière-plan du site Web et de la transparence vidéo. Lorsqu’il est nécessaire de créer une transition entre l’arrière-plan et le contenu, cela peut être facilement réalisé en utilisant la transparence avec les images et vidéos d’arrière-plan du site Web.
• Utilisé pour le menu de navigation du site Web. Utilisez la transparence pour créer un bel effet de menu. Vous pouvez rendre l'arrière-plan du menu transparent afin que davantage de contenu soit visible sur l'arrière-plan des autres éléments de la page.

Opacité

L'opacité est l'exact opposé de la transparence. L'opacité définit l'état totalement opaque d'un élément. En CSS, l'utilisation des fonctions "rgba" ou "hsla" définit l'opacité et permet à l'utilisateur de définir une valeur combinée de couleur et de transparence. L'opacité de deux éléments peut être combinée pour créer une nouvelle couleur qui est à la fois la couleur de mélange de l'élément mélangé tout en conservant la luminosité et le contraste d'origine. Voici un exemple utilisant « rgba » et « hsla » :

div {
    background-color: rgba(255, 255, 255, 0.5);
    background-color: hsla(0, 0%, 100%, 0.5);
}

Dans cet exemple, la couleur d'arrière-plan est définie sur une opacité de 50 %. Cela signifie que la couleur d'arrière-plan se mélange avec d'autres éléments de la page pour produire une nouvelle couleur.

Exemples d'application de l'opacité :

• Réglez la couleur d'arrière-plan sur totalement opaque pour obtenir différents effets visuels. Par exemple, dans une conception, vous pouvez utiliser l’opacité pour réduire la luminosité d’une image d’arrière-plan afin qu’elle s’intègre mieux aux autres éléments.
• Utilisé comme couverture pour les éléments de conception de l'interface utilisateur tels que les cartes. En définissant la couverture sur entièrement opaque, vous pouvez rendre les éléments de l'interface utilisateur tels que les cartes plus clairs, tout en empêchant les parties découvertes d'être visibles sous d'autres éléments.
• Créez une zone de texte transparente pour permettre aux éléments d'arrière-plan de pénétrer. Lorsque vous devez ajouter une zone de texte et également permettre aux éléments de la page d'y pénétrer, vous pouvez définir l'opacité de la zone de texte sur 0 pour permettre aux éléments d'arrière-plan d'y pénétrer.

Résumé

La transparence et l'opacité sont deux fonctionnalités intéressantes en CSS. Dans la conception de l'interface utilisateur, l'utilisation de ces fonctionnalités peut facilement créer des changements de couleur et des effets de contraste continus, tout en augmentant la visibilité du contenu de la page dans certains cas. Peu importe où vous utilisez la transparence et l'opacité, il est important de comprendre leurs principes de base.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!