opacity() CSS-Funktion
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.
Die opacity() CSS Funktion wendet Transparenz auf die Proben 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 Filtern Hardwarebeschleunigung für eine bessere Leistung bereitstellen.
Syntax
opacity(amount)
Parameter
amountOptional-
Die Menge der Umwandlung, angegeben als
<number>oder<percentage>. Ein Wert von0%ist vollständig transparent, während ein Wert von100%den Eingang unverändert lässt. Werte zwischen0%und100%sind lineare Multiplikatoren für den Effekt. Der Anfangswert für Interpolation ist1. Der Standardwert ist1.
Formale Syntax
<opacity()> =
opacity( [ <number> | <percentage> ]? )
Beispiele
Beispiele für korrekte Werte für opacity()
opacity(0%) /* Completely transparent */
opacity(50%) /* 50% transparent */
opacity() /* No effect */
opacity(1)
Spezifikationen
| Spezifikation |
|---|
| 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, sind: - Die CSS-Eigenschaft
opacity