Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
brightness()
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.
Diebrightness()CSS<filter-function> wendet einen linearen Multiplikatorwert auf ein Element oder ein Eingabebild an, wodurch das Bild heller oder dunkler erscheint.
Probieren Sie es aus
filter: brightness(1);filter: brightness(1.75);filter: brightness(50%);filter: brightness(0);<section> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>Syntax
brightness(amount)Werte
amountOptionalHelligkeit, angegeben als
<number>oder<percentage>. Ein Wert unter100%macht das Eingabebild oder das Element dunkler, während ein Wert über100%es heller macht. Ein Wert von0%erzeugt ein komplett schwarzes Bild oder Element, während ein Wert von100%das Eingangsbild unverändert lässt. Andere Werte zwischen0%und100%haben einen linearen Multiplikatoreffekt. Werte größer als100%sind erlaubt und liefern hellere Ergebnisse. Der Anfangswert fürInterpolation ist1. Negative Werte sind nicht erlaubt. Der Standardwert ist1.
Die folgenden Paare sind gleichwertig:
brightness(0) /* Brightness is reduced to zero, so input turns black */brightness(0%)brightness(0.4) /* Brightness of input is reduced to 40%, so input is 60% darker */brightness(40%)brightness() /* Brightness of input is not changed */brightness(1)brightness(100%)brightness(2) /* Brightness of input is doubled */brightness(200%)Formale Syntax
<brightness()> =
brightness([<number>|<percentage>]?)
Beispiele
Anwendung der Helligkeit mittels der backdrop-filter-Eigenschaft
Dieses Beispiel zeigt, wie derbrightness()-Filter auf einen Absatz über diebackdrop-filter CSS-Eigenschaft angewendet wird.
CSS
.container { background: url("be_fierce.jpg") no-repeat right / contain #d4d5b2;}p { backdrop-filter: brightness(150%); text-shadow: 2px 2px white;}.container { padding: 5rem 3rem 1rem; width: 30rem;}p { padding: 0.5rem; color: black; font-size: 2rem; font-family: sans-serif;}<div> <p> Text on images can be illegible and inaccessible even with a drop shadow. </p></div>Ergebnis
In diesem Beispiel verschieben sich die Farben im Bereich hinter dem<p>-Element linear. Wenn diebackdrop-filter-Eigenschaft aufbrightness(0%) gesetzt wäre, wäre der<div>-Bereich mit dem<p>-Element schwarz und hätte das dahinterliegende Bild verborgen. Beibrightness(100%) wäre die<div>-Bereichsfarbe dieselbe wie der Eingang#d4d5b2, und das dahinterliegende Bild wäre vollständig transparent. Mit der auf150% eingestellten Helligkeit, wie in diesem Beispiel, werden die Farben im Bild dahinter durch die Helligkeit des<div>-Elements verborgen.
Anwendung der Helligkeit mittels der filter-Eigenschaft
In diesem Beispiel wird einbrightness()-Filter auf das gesamte Element angewendet, einschließlich Inhalt, Rahmen und Hintergrundbild über diefilter CSS-Eigenschaft. Das Ergebnis zeigt drei Variationen unterschiedlicher Helligkeitswerte.
p:first-of-type { filter: brightness(50%);}p:last-of-type { filter: brightness(200%);}p { text-shadow: 2px 2px blue; background-color: magenta; color: palegoldenrod; border: 1em solid rebeccapurple; box-shadow: inset -5px -5px red, 5px 5px yellow; padding: 0.25rem; font-size: 1.25rem; font-family: sans-serif; width: 85vw;}<p>This paragraph has reduced brightness.</p><p>This paragraph has normal brightness.</p><p>This paragraph has increased brightness.</p>Anwendung der Helligkeit mittels des url()-SVG-Helligkeitsfilters
Das SVG-<filter>-Element wird verwendet, um benutzerdefinierte Filtereffekte zu definieren, die dann durchid referenziert werden können. Das<filter>-Element verwendet das<feComponentTransfer>-Primitive, um die Farbwerte auf Pixelbasis neu zuzuordnen.
In diesem Beispiel wird zur Erstellung eines Filters, der den Inhalt, auf den er angewendet wird, um 25 % abdunkelt (d.h. 75 % der ursprünglichen Helligkeit), dasslope-Attribut auf0.75 gesetzt. Wir können dann den Filter durchid referenzieren.
Angenommen, folgendes gilt:
<svg role="none"> <filter color-interpolation-filters="sRGB"> <feComponentTransfer> <feFuncR type="linear" slope="0.75" /> <feFuncG type="linear" slope="0.75" /> <feFuncB type="linear" slope="0.75" /> </feComponentTransfer> </filter></svg>Die folgenden Deklarationen erzeugen ähnliche Effekte:
filter: brightness(75%);filter: url("#darken25"); /* with embedded SVG */filter: url("folder/fileName.svg#darken25"); /* external svg filter definition */In den Bildern unten hat das erste einebrightness()-Filterfunktion angewendet, das zweite hat eine ähnliche SVG-Helligkeitsfunktion, und das dritte ist das Originalbild zum Vergleich.
<table> <thead> <tr> <th>Live example</th> <th>SVG Equivalent</th> <th>Original image</th> </tr> </thead> <tbody> <tr> <td> <img src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg" alt="darkened pride flag" /> </td> <td> <img src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg" alt="darkened pride flag" /> </td> <td> <img src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg" alt="Pride flag" /> </td> </tr> </tbody></table>.css-filter { filter: brightness(0.75);}.svg-filter { filter: url("#darken25");}th,td { padding: 5px;}svg:not(:root) { display: none;}Spezifikationen
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-brightness |
Browser-Kompatibilität
Siehe auch
- CSS Filtereffekte Modul
- Die anderen
<filter-function>Funktionen, die in Werten derfilterundbackdrop-filterEigenschaften verwendet werden können, umfassen: