CSS-Eigenschaft opacity

❮ Vorige Nächste ❯

Die Eigenschaft opacity definiert den Grad der Transparenz eines Elements. Die Eigenschaft opacity ist das Gegenteil der Eigenschaft transparency.

Diese Eigenschaft ermöglicht es, ein Element vollständig transparent, standardmäßig oder halbtransparent zu machen.

Die Zahl liegt zwischen 0 und 1, der Wert 1 ist der Standardwert und macht das Element völlig undurchsichtig. Ein Wert 0 macht das Element vollständig transparent. Ein Wert zwischen 0 und 1 macht ein Element allmählich klar.

Negative Werte sind gültig.

Wenn Sie dem Hintergrund eines Elements mithilfe der Eigenschaft opacity Transparenz hinzufügen, werden auch alle seine untergeordneten Elemente transparent. Verwenden Sie RGBA-Farben, wenn Sie die untergeordneten Elemente nicht beeinflussen möchten.

Anfangswert	1.0
Gilt für	Alle Elemente.
Geerbt	Nein
Animierbar	Ja
Version	CSS3
DOM Syntax	object.style.opacity = "0.3";

Syntax

opacity: number | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .example1 {
      background-color: #8ebf42;
      opacity: 0.3;
      filter: Alpha(opacity=50); /* IE8 and earlier */
      }
      .example2 {
      background-color: #8ebf42;
      opacity: 1;
      filter: Alpha(opacity=50); /* IE8 and earlier */
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft opacity</h2>
    <h3>Opacity Level ist 0.3;</h3>
    <div class="example1"> Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</div>
    <h3>Opacity Level ist 1;</h3>
    <div class="example2">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</div>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel, wo der Grad von opacity des ersten Bildes 1,0, der des zweiten Bildes 0,6 und der Grad von opacity des dritten Bildes 0,2 ist:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      img.a{
      opacity: 1;
      filter: alpha(opacity=100); /* IE8 and lower */ 
      }
      img.b{
      opacity: 0.6;
      filter: alpha(opacity=100); /* IE8 and lower */ 
      }
      img.c{
      opacity: 0.2;
      filter: alpha(opacity=100); /* IE8 and lower */
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft opacity</h2>
    <h3>Opacity: 1.0;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="a">
    <h3>Opacity: 0.6;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="b">
    <h3>Opacity: 0.2;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="c">
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
number	Definiert den Opazitätsgrad. Der Standardwert ist 1,0.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.