CSS Durchsichtigkeit/Transparenz
- Vorherige Seite CSS-Pseudo-Element
- Nächste Seite CSS-Navigationsleiste
opacity Das Attribut bestimmt die Durchsichtigkeit/Transparenz eines Elements.
Transparente Bilder
opacity Der Wertebereich des Attributs beträgt 0.0-1.0. Je niedriger der Wert, desto transparenter wird der Bildinhalt:
opacity 0.2
opacity 0.5
opacity 1
Beispiel
img {
opacity: 0.5;
}
transparente Hover-Effekte
opacity Das Attribut wird in der Regel mit :hover Kombiniert mit Selectoren, können Sie die Durchsichtigkeit ändern, wenn die Maus über einem Bild bewegt wird:
Beispiel
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Beispiel-Erklärung
Der erste CSS-Block ähnelt dem Code in Beispiel 1. Außerdem haben wir eine Wirkung hinzugefügt, die eintritt, wenn der Benutzer die Maus auf eines der Bilder bewegt. In diesem Fall sollen die Bilder durchsichtig sein, wenn der Benutzer die Maus auf eines der Bilder bewegt. Dieser CSS-Code ist opacity:1;.
Wenn der Mauszeiger die Abbildung verlässt, wird die Abbildung wieder transparent.
Beispiel eines umgekehrten Hover-Effekts:
Beispiel
img:hover {
opacity: 0.5;
}
Transparente Box
Verwenden Sie opacity Wenn die Deckkraft eines Elements auf den Hintergrund eines Elements angewendet wird, übernehmen alle Unterlemente die gleiche Deckkraft. Dies kann den Text in vollständig transparenten Elementen schwer lesbar machen:
Beispiel
div {
opacity: 0.3;
}
Deckkraft mit RGBA verwenden
Wenn Sie die Deckkraft der Unterelemente nicht anwenden möchten, wie im obigen Beispiel, verwenden Sie RGBA-Farbwerte. Im folgenden Beispiel wird die Hintergrundfarbe而不是文本的不透明度设置：
Sie haben von unseren CSS-Farben In diesem Kapitel haben wir gelernt, dass RGB als Farbwerte verwendet werden kann. Neben RGB können RGB-Farbwerte auch mit dem Alpha-Kanal (RGBA) verwendet werden - dieser Kanal bestimmt die Deckkraft der Farbe.
RGBA-Farbwerte werden angegeben als: rgba(red, green, blue, alpha) alpha Die Parameter sind Zahlen zwischen 0.0 (vollständig transparent) und 1.0 (vollständig undurchsichtig).
Tipp:Sie werden in unseren CSS-Farben In diesem Kapitel haben wir mehr über RGBA-Farben gelernt.
Beispiel
div {
background: rgba(76, 175, 80, 0.3) /* Grün mit 30% Deckkraft im Hintergrund */
}
Text in der transparenten Box
Dies ist ein Text, der in einer transparenten Box steht.
Beispiel
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Das sind einige Texte in einem transparenten Rahmen.</p>
</div>
</div>
</body>
</html>
Beispiel-Erklärung
Zunächst erstellen wir ein <div>-Element mit Hintergrundbild und Rahmen (class="background").
Dann erstellen wir in dem ersten <div> einen weiteren <div> (class="transbox").
<div class="transbox"> hat eine Hintergrundfarbe und einen Rahmen - dieser div ist transparent.
In einem transparenten <div> haben wir einige Texte im <p>-Element hinzugefügt.
- Vorherige Seite CSS-Pseudo-Element
- Nächste Seite CSS-Navigationsleiste
