Définir l'opacité uniquement sur la couleur d'arrière-plan, pas sur l'opacité du texte en CSS-tutoriel CSS-php.cn

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

1162 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!