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 Bildpunkte des Eingabebildes an. Ihr 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 ähnelt der länger etablierten opacity-Eigenschaft. Der Unterschied besteht darin, dass einige Browser für Filter Hardwarebeschleunigung bereitstellen, um die Leistung zu verbessern.
Syntax
opacity(amount)
Parameter
amountOptional-
Das Ausmaß der Umwandlung, angegeben als
<number>oder<percentage>. Ein Wert von0%ist vollständig transparent, während ein Wert von100%das Eingabebild unverändert lässt. Werte zwischen0%und100%skalieren den Effekt linear. Werte über100%sind zulässig, aber der Effekt wird auf100%begrenzt. Negative Werte sind nicht zulässig. Der Anfangswert für die Interpolation ist1. Der Standardwert ist1.
Formale Syntax
<opacity()> =
opacity( [ <number> | <percentage> ]? )
Beispiele
Beispiele für gültige 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
- Zu den weiteren
<filter-function>-Funktionen, die als Werte der Eigenschaftenfilterundbackdrop-filterverwendet werden können, gehören: - Die CSS-Eigenschaft
opacity