CSS/Eigenschaften/Anzeige/opacity

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft opacity (engl. für Deckkraft) lässt sich über den Alphakanal der Grad der Transparenz eines Elementes steuern.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Werte sind möglich:

  • Zahlenwert zwischen 0 und 1
    Ein Wert von eins bedeutet dabei eine 100 %ige Deckkraft, also keinerlei Transparenz, ein Wert von null entsprechend keinerlei Deckfähigkeit, also vollständige Transparenz.
  • inherit: gibt an, dass der Wert der Deckfähigkeit des Elternelements übernommen wird.
Beachten Sie: Obwohl der Wert für opacity eine prozentuale Angabe ist, sind Prozentwerte nicht erlaubt.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
      span {
        background: #dddd00;
        border: 5px solid;
        cursor: help;
        display: inline-block;
        margin: 1em 2em;
        outline: 5px solid red;
        padding: 1em 2em;
      }
      .o0  { opacity: 0; }
      .o2  { opacity: 0.2; }
      .o4  { opacity: 0.4; }
      .o6  { opacity: 0.6; }
      .o8  { opacity: 0.8; }
      .o10 { opacity: 1; }
</source>
Das Beispiel besteht aus sechs span-Elementen, die über ihre Klassen unterschiedliche Werte für die Deckkraft haben.
Das erste Element mit der Deckkraft opacity: 0 ist nicht sichtbar; es nimmt jedoch seinen Raum im Elementfluss ein.

Eine derartig festgelegte Deckfähigkeit gilt dabei stets für das gesamte Element, einschließlich border und outline. Soll lediglich der Elementinhalt teiltransparent gestaltet werden, so muss auf entsprechende Hintergrundfarben zurückgegriffen werden.

Transparenter Hintergund mit rgba[Bearbeiten]

Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgba-Farbangaben bei der Hintergrundfarbe.

Beispiel ansehen …
      .o0  { background-color: rgba(255, 255, 255, 0); }
      .o2  { background-color: rgba(255, 255, 255, 0.2); }
      .o4  { background-color: rgba(255, 255, 255, 0.4); }
      .o6  { background-color: rgba(255, 255, 255, 0.6); }
      .o8  { background-color: rgba(255, 255, 255, 0.8); }
      .o10 { background-color: rgba(255, 255, 255, 1); }
</source>
Das Beispiel entspricht weitgehend dem oberen. Die Transparenz beschränkt sich aber auf den Hintergrund, der mit background-color und dem entsprechenden rgba-Wert.

Weblinks[Bearbeiten]