Comment définir la transparence CSS ? Résumé des méthodes de définition de diverses transparences en CSS-tutoriel CSS-php.cn

Cet article vous présentera comment définir la transparence en CSS. Jetons un coup d'œil au contenu spécifique.

Opacité et transparence

Par définition, l'opacité et la transparence en CSS définissent la visibilité d'un élément, qu'il s'agisse d'une image, d'un tableau ou d'un RGBA (Red Green Blue alpha ) valeur de couleur. Selon leur signification, l'opacité mesure le degré d'opacité ou de solidité d'un élément, tandis que la transparence mesure la facilité avec laquelle vous pouvez voir ce qui est présent dans les calques situés en dessous. Quoi qu'il en soit, ils fonctionnent de la même manière : 100 % opaque signifie que l'élément est complètement visible, tandis que 100 % transparent signifie qu'il est complètement invisible.

Au lieu d'utiliser un logiciel coûteux, vous pouvez créer ces effets en utilisant CSS ! En quelques touches simples, vous pouvez modifier instantanément l'apparence d'un élément sur votre page, ou dans certains cas même la façon dont il réagit lorsque le pointeur de la souris le survole.

Images opaques et transparentes

Lors de la modification de l'image, la propriété opacité accepte des valeurs comprises entre 0,0 et 1,0, cette dernière étant la valeur par défaut. Par conséquent, plus la valeur est faible, plus l’image devient transparente.

Dans l'exemple ci-dessous, nous utilisons 0,2, 0,5 et 1,0 pour une comparaison côte à côte :

Comment définir la transparence CSS ? Résumé des méthodes de définition de diverses transparences en CSS

img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

Copier après la connexion

Remarque : Nous avons utilisé le attribut filter car Internet Explorer 8 et les versions antérieures ne reconnaissent pas encore l'attribut opacity.

Boîtes et tableaux transparents

Vous pouvez utiliser l'attribut opacity pour ajouter de la transparence à un élément, y compris l'arrière-plan et tous ses éléments enfants. Par exemple, dans la zone ci-dessous (en utilisant

au lieu de et ses enfants), tout le texte devient également transparent.

Comment définir la transparence CSS ? Résumé des méthodes de définition de diverses transparences en CSS

Le texte poussera également la couleur d'arrière-plan à être transparente, il n'est donc pas nécessaire de modifier quoi que ce soit d'autre si c'est ce que vous souhaitez obtenir. Vous pouvez directement utiliser le code suivant pour obtenir cet effet :

div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}

Copier après la connexion

Utiliser RGBA pour la transparence

Cependant, si vous souhaitez uniquement changer le fond sans texte ni autre sous- L'élément restera opaque, vous pouvez utiliser RGBA pour le contourner. Si vous avez l'habitude de travailler avec des codes hexadécimaux, vous pouvez découvrir d'autres façons de définir les couleurs en CSS , à savoir les couleurs RVB/RGBA et HSL/HSLA.

RGBA représente l'alpha rouge, vert et bleu, et le paramètre alpha spécifie l'opacité de la couleur RVB. Ainsi, en utilisant les valeurs de couleur RGBA, nous pouvons définir l'opacité de l'arrière-plan tandis que le texte reste noir :

Comment définir la transparence CSS ? Résumé des méthodes de définition de diverses transparences en CSS

Dans l'exemple ci-dessus, nous avons utilisé les valeurs RVB 171,205,239 puis Les paramètres alpha définissent sa transparence ou sa transparence. Par exemple :

div { background：rgba（171,205,239,0.3）/ *蓝色背景，不透明度为30％* / }

Copier après la connexion

Texte opaque dans une image d'arrière-plan transparente CSS

Une autre chose vraiment cool que vous pouvez faire avec l'opacité et la transparence est dans une boîte transparente Ajoutez du texte, peut-être pour compenser une image d'arrière-plan vraiment inappropriée ou sombre, comme dans l'exemple ci-dessous.

Comment définir la transparence CSS ? Résumé des méthodes de définition de diverses transparences en CSS

Pour créer ce style simple mais efficace, utilisez un élément

et nommez ses classes "background" et "transbox". La première catégorie est une image d’arrière-plan et une bordure, tandis que la deuxième catégorie est une couleur d’arrière-plan et une bordure distinctes. Enfin, ajoutez du texte à l’aide de paragraphes.

Tout d'abord, nous créons un élément

(class="background") avec une image d'arrière-plan et une bordure. Ensuite, nous créons un autre

(class="transbox") à l'intérieur du premier

. L'élément

a une couleur d'arrière-plan et une bordure - le div est transparent. Dans l'élément

transparent, nous avons ajouté du texte à l'intérieur de l'élément

Voici le code que nous avons utilisé, vous pouvez le modifier et le tester avec vos propres images et texte :

<html>
<head>
<style>
div.background {
background: url(green-tile.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
font-family: Verdana;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<div>
<div>
<p>This is sample text placed in a transparent box.</p>
</div>
</div>
</body>
</html>

Copier après la connexion

Enfin

Il existe de nombreuses possibilités d'opacité et de transparence Utilisation, qu'elle soit purement esthétique ou pour mettre en valeur des éléments d'une page web. C'est certainement l'alternative la moins chère que de compter sur Photoshop ou un autre logiciel de retouche photo pour faire tout cela à votre place !

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!

Étiquettes associées：

css透明度

source：php.cn

Article précédent：Une introduction à l'ordre de priorité CSS Article suivant：Quelle est la propriété line-clamp du CSS ? Comment utiliser ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur