opacity()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Die opacity() CSS Funktion wendet Transparenz auf die Samples im Eingabebild an. Das Ergebnis ist eine <filter-function>.

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 ist ähnlich der bekannteren opacity-Eigenschaft. Der Unterschied ist, dass einige Browser bei der Verwendung von Filtern Hardware-Beschleunigung für eine bessere Leistung bieten.

Syntax

css
opacity(amount)

Parameter

amount Optional

Die Menge der Umwandlung, angegeben als <number> oder als <percentage>. Ein Wert von 0% ist vollständig transparent, während ein Wert von 100% das Eingabebild unverändert lässt. Werte zwischen 0% und 100% sind lineare Multiplikatoren auf den Effekt. Der Anfangswert für Interpolation ist 1. Der Standardwert ist 1.

Formale Syntax

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

Beispiele

Beispiele für korrekte Werte für opacity()

css
opacity(0%)   /* Completely transparent */
opacity(50%)  /* 50% transparent */

opacity()     /* No effect */
opacity(1)

Spezifikationen

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

Browser-Kompatibilität

Siehe auch