Maison > interface Web > tutoriel CSS > Comment définir la transparence des éléments en CSS

Comment définir la transparence des éléments en CSS

青灯夜游
Libérer: 2023-01-07 11:43:39
original
7947 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut opacity pour définir la transparence d'un élément. Il vous suffit d'ajouter le style "opacity:value;" à l'élément ; la plage de valeurs est "0,0 ~ 1,0", "0,0" signifie complètement transparent, "1,0" signifie complètement opaque.

Comment définir la transparence des éléments en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

CSS définit la transparence (opacité) de l'élément

Méthode : Utiliser l'attribut d'opacité CSS3

Fonction : Définir la transparence de l'élément

Syntaxe :

js

object.style.opacity=value
Copier après la connexion

css

opacity: value|inherit;
Copier après la connexion

Paramètres :

  • valeur : la transparence spécifiée varie de 0,0 à 1,0, 0,0 signifie complètement transparent, 1,0 signifie complètement opaque.

  • inherit : La valeur de opcity est héritée de l'élément parent

Démo :

<!DOCTYPE html>
<html>
<head>
	<style> 
	div {
		background-color:red;
	}
	.demo{
		opacity:0.4;
		filter:Alpha(opacity=40); /* IE8 and earlier */
	}	
	</style>
</head>
<body>
	<div =>此元素不透明</div><br />
	<div class="demo">此元素的透明度为0.4!注意,文本和背景颜色都受不透明度级别的影响!</div>
 
</body>
</html>
Copier après la connexion

Rendu :

Comment définir la transparence des éléments en CSS

(Partage vidéo d'apprentissage : tutoriel vidéo CSS ; )

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
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal