Deckkraft/Transparenz von CSS-Bildern


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Die Eigenschaft opacity gibt die Opazität/Transparenz eines Elements an.


Transparentes Bild

Die Eigenschaft opacity kann einen Wert zwischen 0,0 und 1,0 annehmen. Je niedriger der Wert, desto transparenter:

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(default)

Beispiel

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>



Transparenter Hover-Effekt

Die Eigenschaft opacity wird häufig zusammen mit dem Selektor :hover verwendet, um die Deckkraft beim Mouseover zu ändern:

Northern Lights
Mountains
Italy

Beispiel

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>


Beispiel erklärt

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:

Northern Lights
Mountains
Italy

Beispiel

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>




Transparente Box

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

Beispiel

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>



Transparenz mit RGBA

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

Beispiel

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>



Text im transparenten Feld

This is some text that is placed in the transparent box.

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


Beispiel erklärt

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.