Die Eigenschaft opacity
gibt die Opazität/Transparenz eines Elements an.
Die Eigenschaft opacity
kann einen Wert zwischen 0,0 und 1,0 annehmen. Je niedriger der Wert, desto transparenter:
opacity 0.2
opacity 0.5
opacity 1
(default)
img {
opacity: 0.5;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>
<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
Die Eigenschaft opacity
wird häufig zusammen mit dem Selektor :hover
verwendet, um die Deckkraft beim Mouseover zu ändern:
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Der erste CSS-Block ähnelt dem Code in Beispiel 1. Zusätzlich haben wir hinzugefügt, was passieren soll, wenn ein Benutzer mit der Maus über eines der Bilder fährt. In diesem Fall möchten wir, dass das Bild NICHT transparent ist, wenn der Benutzer mit der Maus darüber fährt. Das CSS hierfür ist opacity:1;
.
Wenn sich der Mauszeiger vom Bild entfernt, wird das Bild wieder transparent.
Ein Beispiel für einen umgekehrten Hover-Effekt:
img:hover {
opacity: 0.5;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Wenn Sie die Eigenschaft opacity
verwenden, um dem Hintergrund eines Elements und aller seiner untergeordneten Elemente Transparenz hinzuzufügen erben die gleiche Transparenz. Dies kann dazu führen, dass der Text in einem vollständig transparenten Element schwer lesbar ist:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
div {
opacity: 0.3;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #04AA6D;
padding: 10px;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>
<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
</body>
</html>
Wenn Sie keine Deckkraft auf untergeordnete Elemente anwenden möchten, wie in unserem Beispiel oben, verwenden Sie RGBA-Farbwerte. Das folgende Beispiel legt die Deckkraft für die Hintergrundfarbe und nicht für den Text fest:
100% opacity
60% opacity
30% opacity
10% opacity
In unserem Kapitel „CSS-Farben“ haben Sie gelernt, dass Sie RGB als Farbwert verwenden können. Zusätzlich zu RGB, Sie können einen RGB-Farbwert mit einem Alphakanal (RGBA) verwenden, der die Deckkraft einer Farbe angibt.
Ein RGBA-Farbwert wird angegeben mit: rgba(red, green, blue, alpha). Der Der Parameter Alpha ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig).
Tipp: Weitere Informationen zu RGBA-Farben finden Sie in unserem Kapitel „CSS-Farben“.
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30%
opacity */
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(4, 170, 109);
padding: 10px;
}
div.first {
background: rgba(4, 170, 109, 0.1);
}
div.second {
background: rgba(4, 170, 109, 0.3);
}
div.third {
background: rgba(4, 170, 109, 0.6);
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>
<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>
</body>
</html>
This is some text that is placed in the transparent box.
<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>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<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>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Zuerst erstellen wir ein <div>-Element (class="background") mit einem Hintergrundbild und einem Rahmen.
Dann erstellen wir ein weiteres <div> (class="transbox") innerhalb des ersten <div>.
Der <div class="transbox"> hat eine Hintergrundfarbe und einen Rahmen - Das Div ist transparent.
Innerhalb der transparenten <div>, wir fügen etwas Text innerhalb eines <p>-Elements hinzu.