CSS-Eigenschaft opacity

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>

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>

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.

Browser-Support

4.0+ 12.0+ 2.0+ 3.1+ 10.0+


Finden Sie das nützlich?

Ähnliche Artikel