Maison > Article > interface Web > Comment définir la transparence en CSS
Comment définir la transparence en CSS
- 醉折花枝作酒筹original
- 2021-04-06 18:07:5151851parcourir
Comment définir la transparence en CSS : 1. Utilisez rgba() pour définir la transparence des couleurs, syntaxe "background:rgba(R,G,B,A)" ; 2. Utilisez l'attribut opacity pour définir la transparence de l'arrière-plan, syntaxe "opacité : valeur de transparence ;", la plage de valeurs est "0,0 ~ 1,0".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
1. css css rgba() définit la transparence des couleurs
Syntaxe :
rgba（R,G,B,A）;
RGBA représente Rouge (rouge) Vert (vert) Abréviation pour Bleu et Alpha. Les valeurs de couleur RVBA sont une extension des valeurs de couleur RVB, avec un canal alpha - qui spécifie l'opacité de l'objet.
Introduction aux valeurs dans rgba() :
R : valeur rouge. Entier positif (0~255)
G : valeur verte. Entier positif (0~255)
B : valeur bleue. Entier positif (0~255)
A : Transparence. La valeur comprise entre 0 et 1
rgba() permet de définir simplement la transparence des couleurs, qui a de nombreuses applications en mise en page. Par exemple : rendez l'arrière-plan transparent, mais le texte au-dessus est opaque.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rgba()</title>
<style>
.demo{
width: 350px;
height: 300px;
margin: 50px auto;
}
.demo *{
width: 120px;
height: 120px;
margin: 10px;
float: left;
}
.demo1{
background:rgba(255,0,0,1);
}
.demo2{
background:rgba(255,0,0,0.5);
}
</style>
</head>
<body>
<p class="demo">
<p class="demo1">背景色不透明，文字不透明！</p>
<p class="demo2">背景色半透明，文字不透明！</p>
</p>
</body>
</html>Rendu :
Dans l'exemple ci-dessus, la couleur est set Les valeurs sont les mêmes, seule la transparence est différente. De cette façon, nous ne pouvons voir aucune différence autre que la couleur. Nous définissons également une couleur d'arrière-plan sur le conteneur parent demo, donc le rendu ressemble à ceci :
De cette façon, vous pouvez voir le résultat : la première case (démo1) n'a pas de jeu de transparence et la couleur rouge recouvre complètement la couleur de la boîte en dessous (démo2) définit la transparence, rendant la couleur translucide ; , et ne couvre pas la couleur de la boîte ci-dessous (démo) la couleur est entièrement recouverte, mais mélangée.
2. Définir la transparence de l'arrière-plan avec l'attribut d'opacité CSS
Syntaxe :
opacity: value ;
value : Spécifiez l'opacité, de 0,0 (entièrement transparent) à 1.0 (entièrement opaque). L'attribut
opacity est hérité et rendra tous les éléments du conteneur transparents
Exemple de code :
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>opacity属性</title>
<style>
.demo{
width: 280px;
height: 140px;
margin: 50px auto;
}
.demo1,.demo2{
width: 120px;
height: 120px;
margin: 10px;
float: left;
background:#2DC4CB;
}
.demo1{
opacity:1;
}
.demo2{
opacity:0.5;
}
</style>
</head>
<body>
<p class="demo">
<p class="demo1">
<p>背景色不透明，文字不透明！</p>
</p>
<p class="demo2">
<p>背景色透明，文字也透明！</p>
</p>
</p>
</body></html>Rendu :
opacité : 0,5 ; rend tous les éléments du conteneur demo2 translucides.
Résumé : Bien que la méthode rgba() et la méthode opacity puissent obtenir des effets de transparence, rgba() n'agit que sur la couleur de l'élément ou sur sa couleur d'arrière-plan (rgb( ) est défini. Les éléments enfants d'un élément transparent n'hériteront pas de son effet de transparence) ; et l'opacité est un héritage, qui affecte non seulement l'élément lui-même, mais rend également transparents tous les éléments enfants de l'élément.
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!