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
  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Opacity</title>
    <style>
      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; }
    </style>
  </head>
  <body>
    <h1>Opacity - Durchsichtigkeit</h1>
    <p>
      <span class="o0" title="opacity: 0.0;">opacity: 0.0</span>
      <span class="o2" title="opacity: 0.2;">opacity: 0.2</span>
      <span class="o4" title="opacity: 0.4;">opacity: 0.4</span>
      <span class="o6" title="opacity: 0.6;">opacity: 0.6</span>
      <span class="o8" title="opacity: 0.8;">opacity: 0.8</span>
      <span class="o10" title="opacity: 1.0;">opacity: 1.0</span>
    </p>
  </body>
</html>

Mit dem Wert für die Eigenschaft opacity geben Sie den Grad der Deckkraft eines Elements an. Erlaubt ist dabei ein Zahlenwert zwischen 0 und 1 oder die Angabe inherit. 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.

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.

Empfehlung: Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgba-Farbangaben bei der Hintergrundfarbe.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML