Heim >Web-Frontend >CSS-Tutorial >Stellen Sie die Deckkraft nur auf die Hintergrundfarbe ein, nicht auf die Textdeckkraft in CSS
Stellen Sie die Deckkraft nur auf die Hintergrundfarbe ein, nicht auf die Textdeckkraft in CSS
- 王林nach vorne
- 2023-09-11 20:33:051179Durchsuche
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);
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>
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>
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>
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!