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 Muster 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 etablierteren opacity-Eigenschaft. Der Unterschied besteht darin, dass einige Browser bei Verwendung von Filtern Hardware-Beschleunigung für eine bessere Leistung bieten können.

Syntax

css
opacity(amount)

Parameter

amount Optional

Der Betrag der Umwandlung, angegeben als <number> oder <percentage>. Ein Wert von 0% ist vollständig transparent, während ein Wert von 100% den Eingabewert 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