CSS-Funktion `brightness()`

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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die brightness()-CSS-Funktion wendet einen linearen Multiplikator auf ein Element oder ein Eingabebild an, sodass es heller oder dunkler erscheint. Sie wird als Wert für die Eigenschaften filter und backdrop-filter verwendet.

Probieren Sie es aus

filter: brightness(1);

filter: brightness(1.75);

filter: brightness(50%);

filter: brightness(0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

css

/* Completely black */
brightness(0)

/* No change */
brightness()
brightness(1)
brightness(100%)

/* 60% brightness */
brightness(.6)
brightness(60%)

/* Double brightness */
brightness(2)
brightness(200%)

Parameter

<number> oder <percentage> Optional: Gibt das Ausmaß der Umwandlung an. Ein Wert unter 100% verdunkelt das Eingabebild oder Element, während ein Wert über 100% es aufhellt. Ein Wert von 0% erzeugt ein vollständig schwarzes Bild oder Element; bei 100% bleibt die Eingabe unverändert. Werte zwischen 0% und 100% wirken als lineare Multiplikatoren auf den Effekt. Werte über 100% sind zulässig und führen zu helleren Ergebnissen. Der Anfangswert für die Interpolation ist 1. Negative Werte sind nicht zulässig. Der Standardwert ist 1.

Rückgabewert

Ein <filter-function>-Wert.

Formale Syntax

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

Beispiele

Helligkeit mit der Eigenschaft backdrop-filter anpassen

Dieses Beispiel zeigt, wie Sie den Filter brightness() über die CSS-Eigenschaft backdrop-filter auf einen Absatz anwenden.

CSS

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 class="container">
  <p>
    Text on images can be illegible and inaccessible even with a drop shadow.
  </p>
</div>

Ergebnis

In diesem Beispiel ändern sich die Farben im Bereich hinter dem <p>-Element linear. Wäre die Eigenschaft backdrop-filter auf brightness(0%) gesetzt, wäre der Bereich des <div>-Elements mit dem <p>-Element schwarz und würde das dahinterliegende Bild verdecken. Bei brightness(100%) entspräche die Farbe des <div>-Bereichs dem Eingabewert #d4d5b2, und das dahinterliegende Bild wäre vollständig sichtbar. Bei einer Helligkeit von 150%, wie in diesem Beispiel, werden die Farben des dahinterliegenden Bildes durch die Helligkeit des <div>-Elements überdeckt.

Helligkeit mit der Eigenschaft filter anpassen

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

css

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>

Den SVG-Filter verwenden

Dieses Beispiel zeigt drei Bilder zum Vergleich: ein Bild mit angewendeter brightness()-Filterfunktion, ein Bild mit dem entsprechenden SVG-Filter und das Originalbild.

SVG

Mit dem SVG-Filterelement <feComponentTransfer> lässt sich die Helligkeit von Inhalten ebenfalls anpassen. Dazu werden entsprechende Helligkeitsanpassungen für die verschachtelten linearen Elemente <feFuncR>, <feFuncG> und <feFuncB> erstellt. Für die roten, grünen und blauen Filterprimitiven wird derselbe slope-Wert festgelegt. Anschließend kann der SVG-Effekt über die ID des <filter> referenziert werden:

html

<svg height="0" role="none">
  <filter id="brightness75" 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 erzielen denselben Effekt:

css

filter: brightness(0.75);
filter: brightness(75%);
filter: url("#brightness75"); /* with embedded SVG */
filter: url("fileName.svg#brightness75"); /* external SVG */

CSS

Das folgende CSS passt die Helligkeit von Elementen abhängig von ihrer Klasse css-filter oder svg-filter an:

css

.css-filter {
  filter: brightness(0.75);
}

.svg-filter {
  filter: url("#brightness75");
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th><code>brightness()</code> filter</th>
      <th>SVG filter equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="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>

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Modul CSS-Filtereffekte
Weitere <filter-function>-Funktionen, die als Werte der Eigenschaften filter und backdrop-filter verwendet werden können:

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS-Funktion brightness()

CSS

Ergebnis

SVG

CSS

Help improve MDN

CSS-Funktion `brightness()`