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

王林
Libérer: 2023-09-11 20:33:05
avant
1221 Les gens l'ont consulté

仅将不透明度设置为背景颜色,而不是 CSS 中文本的不透明度

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);
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

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