Stellen Sie die Deckkraft nur auf die Hintergrundfarbe ein, nicht auf die Textdeckkraft in CSS-CSS-Tutorial-php.cn

Stellen Sie die Deckkraft nur auf die Hintergrundfarbe ein, nicht auf die Textdeckkraft in CSS

王林

Freigeben： 2023-09-11 20:33:05

nach vorne

1144 Leute haben es durchsucht

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

In CSS können wir den Hintergrund eines bestimmten HTML-Elements mithilfe der CSS-Eigenschaft „background“ festlegen. Manchmal müssen wir möglicherweise die Deckkraft einer Hintergrundfarbe reduzieren, ohne den Inhalt des HTML-Elements zu beeinträchtigen.

Wir können die Deckkraft der Hintergrundfarbe verringern, indem wir den Wert der Alpha-Variable verringern und gleichzeitig den Farbwert der Eigenschaft „Hintergrundfarbe“ zuweisen.

Grammatik

Benutzer können der folgenden Syntax folgen, um die Deckkraft nur auf die Hintergrundfarbe und nicht auf den Text in CSS festzulegen.

background: rgba(255, 0, 0, opacity);
   or
background-color: hsla(0, 100%, 30%, opacity);

Nach dem Login kopieren

Benutzer können die Hintergrundfarbe mit „rgba“ oder „hsla“ festlegen; „a“ steht für Alpha-Deckkraft, deren Wert zwischen 0 und 1 liegt.

Beispiel 1

Im folgenden Beispiel haben wir ein HTML-Div-Element erstellt und die Hintergrundfarbe mithilfe des Attributs „background“ festgelegt. Wir verwenden den Wert „rgba“, um die Hintergrundfarbe festzulegen. Wir setzen die Farbe „Rot“ auf den Hintergrund mit einer Deckkraft von „0,1“, was der Benutzer in der Ausgabe beobachten kann.

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

Nach dem Login kopieren

Beispiel 2

Im folgenden Beispiel verwenden wir die CSS-Eigenschaft „background-color“, um den Hintergrund eines HTML-Div-Elements festzulegen. Zusätzlich verwenden wir den „hsla“-Wert für den Hintergrund und den Alpha-Deckkraftwert „0,2“.

Benutzer können den Deckkraftwert zwischen 0 und 1 erhöhen oder verringern und beobachten, wie sich die Hintergrundfarbe ändert.

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

Nach dem Login kopieren

Beispiel 3

Wir können das Hintergrund-Div vom Inhalts-Div trennen und eine Hintergrundfarbe mit geringerer Deckkraft für das Div-Element festlegen.

Hier haben wir eine übergeordnete Abteilung. In der übergeordneten Div haben wir die Hintergrund- und Inhalts-Div. Die Hintergrund- und Inhalts-Divs haben die gleichen Abmessungen wie das übergeordnete Div. Wir können das Z-Index-Attribut beider div-Elemente so festlegen, dass das Inhalts-Div über dem Hintergrund-Div angezeigt wird.

Danach können wir die CSS-Eigenschaft „opacity“ verwenden, um die Deckkraft nur des Hintergrund-Divs zu verringern. Auf diese Weise können wir das Hintergrund-Div unter dem Inhalts-Div platzieren und mit der Deckkraft des Hintergrund-Divs spielen.

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

Nach dem Login kopieren

Benutzer haben gelernt, die Deckkraft einer Hintergrundfarbe festzulegen, ohne die Deckkraft des Texts oder des Div-Inhalts zu beeinträchtigen. Benutzer können die Deckkraft einer Farbe reduzieren, wenn sie „rgba“- oder „hsla“-Werte verwenden. Wenn der Benutzer ein Bild oder einen anderen Inhalt als Hintergrund hat, kann er separate Divs für Hintergrund und Inhalt erstellen und die Deckkraft des Hintergrund-Divs verringern.

Das obige ist der detaillierte Inhalt vonStellen Sie die Deckkraft nur auf die Hintergrundfarbe ein, nicht auf die Textdeckkraft in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!