Maison >interface Web >tutoriel CSS >Définir l'opacité uniquement sur la couleur d'arrière-plan, pas sur l'opacité du texte en CSS
Définir l'opacité uniquement sur la couleur d'arrière-plan, pas sur l'opacité du texte en CSS
- 王林avant
- 2023-09-11 20:33:051182parcourir
En CSS, nous pouvons définir l'arrière-plan d'un élément HTML spécifique en utilisant la propriété CSS "background". Parfois, nous pouvons avoir besoin de réduire l'opacité d'une couleur d'arrière-plan sans affecter le contenu de l'élément HTML.
Nous pouvons réduire l'opacité de la couleur d'arrière-plan en diminuant la valeur de la variable alpha tout en attribuant la valeur de couleur à la propriété "Couleur d'arrière-plan".
Grammaire
Les utilisateurs peuvent suivre la syntaxe suivante pour définir l'opacité uniquement sur la couleur d'arrière-plan et non sur le texte en CSS.
background: rgba(255, 0, 0, opacity); or background-color: hsla(0, 100%, 30%, opacity);
Les utilisateurs peuvent définir la couleur d'arrière-plan en utilisant « rgba » ou « hsla » ; ici « a » représente l'opacité alpha, dont la valeur est comprise entre 0 et 1.
Exemple 1
Dans l'exemple ci-dessous, nous avons créé un élément HTML div et défini la couleur d'arrière-plan à l'aide de l'attribut "background". Nous utilisons la valeur "rgba" pour définir la couleur d'arrière-plan. Nous définissons la couleur "rouge" pour l'arrière-plan avec une opacité de "0,1", que l'utilisateur peut observer dans la sortie.
<html>
<head>
<style>
.div {
background: rgba(255, 0, 0, 0.1);
height: 100px;
width: 500px;
}
</style>
</head>
<body>
<h3>Setting up the background opacity without affecting the content of the div element</h3>
<div class = "div">
Hello! How are you?
</div>
</body>
</html>
Exemple 2
Dans l'exemple ci-dessous, nous utilisons la propriété CSS « background-color » pour définir l'arrière-plan d'un élément HTML div. De plus, nous utilisons la valeur "hsla" pour l'arrière-plan et la valeur d'opacité alpha "0,2".
Les utilisateurs peuvent augmenter ou diminuer la valeur d'opacité entre 0 et 1 et regarder la couleur d'arrière-plan changer.
<html>
<head>
<style>
.div {
background-color: hsla(0, 100%, 30%, 0.2);
height: 100px;
width: 500px;
}
</style>
</head>
<body>
<h3>Setting up the background opacity using the background-color: hsla CSS property without affecting the content of the div element </h3>
<div class = "div">
This is a content of the div element.
</div>
</body>
</html>
Exemple 3
Nous pouvons séparer le div d'arrière-plan du div de contenu et définir une couleur d'arrière-plan avec une opacité inférieure pour l'élément div.
Ici, nous avons une division parent. Dans la division parent, nous avons la division d'arrière-plan et de contenu. Les div d’arrière-plan et de contenu ont les mêmes dimensions que le div parent. Nous pouvons définir l'attribut z-index des deux éléments div pour afficher le div de contenu au-dessus du div d'arrière-plan.
Ensuite, nous pouvons utiliser la propriété CSS « opacity » pour réduire l'opacité uniquement du div d'arrière-plan. De cette façon, nous pouvons placer le div d’arrière-plan sous le div de contenu et jouer avec l’opacité du div d’arrière-plan.
<html>
<head>
<style>
#parent {
width: 500px;
height: 150px;
position: relative;
}
#content {
position: absolute;
width: 100%;
height: 100%;
color: white;
font-size: 1.2rem;
top: 0;
left: 0;
}
#background {
background: blue;
filter: alpha(opacity=30);
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<h3>Setting up the background opacity using the filter: alpha(opacity = value) CSS property without affecting the content of the div element </h3>
<div id = "parent">
<div id = "background"></div>
<div id = "content"> This is the content of the div element.</div>
</div>
</body>
</html>
Les utilisateurs ont appris à définir l'opacité d'une couleur d'arrière-plan sans affecter l'opacité du texte ou du contenu div. Les utilisateurs peuvent réduire l'opacité d'une couleur en utilisant les valeurs « rgba » ou « hsla ». Si l'utilisateur a une image ou autre chose comme arrière-plan, il peut créer des div séparés pour l'arrière-plan et le contenu et réduire l'opacité du div d'arrière-plan.
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!