CSS-Funktion `opacity()`

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2016 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Funktion opacity() wendet Transparenz auf das Eingabebild an. Sie wird als Wert für die Eigenschaften filter und backdrop-filter verwendet. Weitere Informationen finden Sie unter CSS und Funktionen.

Probieren Sie es aus

filter: opacity(1);

filter: opacity(80%);

filter: opacity(50%);

filter: opacity(0.2);

filter: opacity(0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Hinweis: Diese Funktion ähnelt der bekannteren Eigenschaft opacity. Der Unterschied besteht darin, dass einige Browser bei Filtern Hardwarebeschleunigung für eine bessere Leistung bieten.

Syntax

css

/* Completely transparent */
opacity(0)

/* No change */
opacity()
opacity(1)
opacity(100%)

/* 60% opacity */
opacity(.6)
opacity(60%)

Parameter

<number> oder <percentage> Optional: Gibt den Grad der Transparenz an. Ein Wert von 0% macht das Eingabebild vollständig transparent, während es bei 100% unverändert bleibt. Werte zwischen 0% und 100% wirken als lineare Multiplikatoren auf den Effekt. Werte über 100% sind zulässig, der Effekt wird jedoch auf 100% begrenzt. Der Anfangswert für die Interpolation ist 1. Der Standardwert ist 1.

Rückgabewert

Ein <filter-function>-Wert.

Formale Syntax

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )

Beispiele

Verwendung des SVG-Filters

Dieses Beispiel zeigt drei Bilder zum Vergleich: ein Bild mit der Filterfunktion opacity(), ein Bild mit dem entsprechenden SVG-Filter und das Originalbild.

SVG

Mit dem SVG-Filterelement <feComponentTransfer> lässt sich die Deckkraft von Inhalten ebenfalls anpassen. Dazu wird über ein untergeordnetes <feFuncA>-Tabellenelement eine entsprechende Transparenz erzeugt. Wir legen tableValues für die Alpha-Filterprimitive fest und können anschließend über die ID des <filter> auf den SVG-Effekt verweisen:

html

<svg height="0" role="none">
  <filter id="opacity70" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncA type="table" tableValues="0 0.7" />
    </feComponentTransfer>
  </filter>
</svg>

Die folgenden Deklarationen erzeugen denselben Effekt:

css

filter: opacity(0.7);
filter: opacity(70%);
filter: url("#opacity70"); /* with embedded SVG */
filter: url("fileName.svg#opacity70"); /* external SVG */

CSS

Wir verwenden CSS, um die Deckkraft von Elementen abhängig von ihrer Klasse css-filter oder svg-filter anzupassen:

css

.css-filter {
  filter: opacity(0.7);
}

.svg-filter {
  filter: url("#opacity70");
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th><code>opacity()</code> filter</th>
      <th>SVG filter equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Spezifikationen

Spezifikation
Filter Effects Module Level 1 # funcdef-filter-opacity

Browser-Kompatibilität

Siehe auch

Das Modul CSS-Filtereffekte
Weitere <filter-function>-Funktionen, die als Werte für die Eigenschaften filter und backdrop-filter verwendet werden können:
Die CSS-Eigenschaft opacity

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS-Funktion opacity()

SVG

CSS

Help improve MDN

CSS-Funktion `opacity()`