brightness()

Die brightness() CSS <filter-function> wendet einen linearen Multiplikatorwert auf ein Element oder ein Eingabebild an und lässt das Bild dadurch heller oder dunkler erscheinen.

Probieren Sie es aus

Syntax

css
brightness(amount)

Werte

amount

Helligkeit, angegeben als <number> oder <percentage>. Ein Wert unter 100% verdunkelt das Eingabebild oder Element, während ein Wert über 100% es aufhellt. Ein Wert von 0% erzeugt ein komplett schwarzes Bild oder Element, während ein Wert von 100% das Eingabebild unverändert lässt. Andere Werte zwischen 0% und 100% haben einen linearen Multiplikatoreffekt. Werte größer als 100% sind erlaubt und führen zu helleren Ergebnissen. Der Anfangswert für die Interpolation ist 1. Negative Werte sind nicht erlaubt. Der Standardwert, wenn nichts angegeben ist, ist 1.

Die folgenden sind Paare äquivalenter Werte:

css
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(1) /* Brightness of input is not changed */
brightness(100%)

brightness(2) /* Brightness of input is doubled */
brightness(200%)

Formale Syntax

<brightness()> = 
brightness( [ <number> | <percentage> ]? )

Beispiele

Anwenden von brightness mit der Eigenschaft backdrop-filter

Dieses Beispiel zeigt, wie der brightness()-Filter auf einen Absatz über die CSS-Eigenschaft backdrop-filter angewendet wird.

CSS

css
.container {
  background: url(image.jpg) no-repeat right / contain #d4d5b2;
}
p {
  backdrop-filter: brightness(150%);
  text-shadow: 2px 2px #ffffff;
}

Ergebnis

In diesem Beispiel ändern sich die Farben im Bereich hinter dem <p>-Element linear. Wenn die Eigenschaft backdrop-filter auf brightness(0%) gesetzt wäre, wäre der <div>-Bereich mit dem <p>-Element schwarz gewesen und hätte das dahinterliegende Bild verborgen. Bei brightness(100%) wäre die <div>-Bereichsfarbe dieselbe wie die Eingabe #d4d5b2, und das Bild dahinter wäre vollständig transparent. Mit einer Helligkeit von 150% wie in diesem Beispiel werden die Farben im dahinterliegenden Bild von der Helligkeit des <div>-Elements verdeckt.

Anwenden von brightness mit der Eigenschaft filter

In diesem Beispiel wird ein brightness()-Filter auf das gesamte Element einschließlich Inhalt, Rahmen und Hintergrundbild über die CSS-Eigenschaft filter angewendet. Das Ergebnis zeigt drei Variationen unterschiedlicher Helligkeitswerte.

css
p:first-of-type {
  filter: brightness(50%);
}
p:last-of-type {
  filter: brightness(200%);
}

Anwenden von brightness mit dem url() SVG Helligkeitsfilter

Das SVG-Element <filter> wird verwendet, um benutzerdefinierte Filtereffekte zu definieren, die dann durch id referenziert werden können. Das <filter>-Element mit dem Primitivelement <feComponentTransfer> ermöglicht ein Pixel-für-Pixel-Farbmapping.

In diesem Beispiel, um einen Filter zu erstellen, der den Inhalt, auf den er angewendet wird, um 25% abdunkelt (d.h. 75% der ursprünglichen Helligkeit), wird das slope-Attribut auf 0.75 gesetzt. Wir können dann den Filter durch id referenzieren.

Angenommen, Folgendes:

html
<svg role="none">
  <filter id="darken25" 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:

css
filter: brightness(75%);
filter: url(#darken25); /* with embedded SVG */
filter: url(folder/fileName.svg#darken25); /* external svg filter definition */

In den untenstehenden Bildern hat das erste einen brightness()-Filter, das zweite einen ähnlichen SVG-Helligkeitsfilter und das dritte ist das Originalbild zum Vergleich.

Spezifikationen

Specification
Filter Effects Module Level 1
# funcdef-filter-brightness

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch