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
opacity(amount)
Parameter
amount
Optional-
Der Betrag der Umwandlung, angegeben als
<number>
oder<percentage>
. Ein Wert von0%
ist vollständig transparent, während ein Wert von100%
den Eingabewert unverändert lässt. Werte zwischen0%
und100%
sind lineare Multiplikatoren auf den Effekt. Der Anfangswert für Interpolation ist1
. Der Standardwert ist1
.
Formale Syntax
Beispiele
Beispiele für korrekte Werte für opacity()
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
- Die anderen
<filter-function>
-Funktionen, die in Werten derfilter
- undbackdrop-filter
-Eigenschaften verwendet werden können, umfassen: - Die CSS
opacity
-Eigenschaft