Maison > Article > interface Web > 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:051134parcourir

仅将不透明度设置为背景颜色，而不是 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);

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!

css html background

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Quel est le style de curseur de saisie de texte ?Article suivant：Quel est le style de curseur de saisie de texte ?

Articles Liés

Voir plus