CSS-Funktion `contrast()`

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 CSS-Funktion contrast() passt den Kontrast des Eingabebildes an. Sie wird als Wert für die Eigenschaften filter und backdrop-filter verwendet.

Probieren Sie es aus

filter: contrast(1);

filter: contrast(1.75);

filter: contrast(50%);

filter: contrast(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 gray */
contrast(0)

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

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

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

Parameter

<number> oder <percentage> Optional: Gibt das Ausmaß der Anpassung an. Ein Wert unter 100% verringert den Kontrast, während ein Wert über 100% ihn erhöht. Ein Wert von 0 oder 0% erzeugt ein vollständig graues Bild; bei 1 oder 100% bleibt das Eingabebild unverändert. Negative Werte sind nicht zulässig. Der Anfangswert für die Interpolation ist 1. Der Standardwert ist 1.

Formale Syntax

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

Beispiele

Mit der Eigenschaft backdrop-filter

Dieses Beispiel wendet über die CSS-Eigenschaft backdrop-filter einen contrast()-Filter auf den Absatz an und verändert dabei die Farben des Bereichs hinter dem <p>.

css

.container {
  background: url("unity_for_the_people.jpg") no-repeat center / contain #333399;
}
p {
  backdrop-filter: contrast(0.2);
}

.container {
  padding: 3rem;
  width: 30rem;
}
p {
  padding: 0.5rem;
  color: white;
  font-family: sans-serif;
}

<div class="container">
  <p>
    Always ensure there is enough contrast between text and all background
    colors. If you think your text may land on top of a background image,
    include a <code>backdrop-filter</code>. Reducing the contrast of background
    colors with the <code>contrast()</code> filter may improve legibility but
    does not guarantee accessibility.
  </p>
</div>

Dieses Beispiel wendet über die CSS-Eigenschaft filter einen contrast()-Filter an. Dadurch wird der Kontrast des gesamten Elements verändert, einschließlich Inhalt, Rahmen, Hintergrund und Schatten.

css

p:first-of-type {
  filter: contrast(30%);
}
p:last-of-type {
  filter: contrast(300%);
}

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 contrast.</p>
<p>This paragraph has normal contrast.</p>
<p>This paragraph has increased contrast.</p>

Verwendung des SVG-Filters

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

SVG

Das SVG-Filterelement <feComponentTransfer> kann ebenfalls verwendet werden, um den Kontrast von Inhalten anzupassen. Dazu werden entsprechende Kontrastanpassungen mit den untergeordneten linearen Elementen <feFuncR>, <feFuncG> und <feFuncB> erstellt. Wir legen für die roten, grünen und blauen Filterprimitive dieselben Werte für slope und intercept fest. Anschließend können wir über die ID des <filter> auf den SVG-Effekt verweisen:

html

<svg height="0" role="none">
  <filter id="contrast200" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5" />
      <feFuncG type="linear" slope="2" intercept="-0.5" />
      <feFuncB type="linear" slope="2" intercept="-0.5" />
    </feComponentTransfer>
  </filter>
</svg>

Die folgenden Deklarationen erzeugen denselben Effekt:

css

filter: contrast(2);
filter: contrast(200%);
filter: url("#contrast200"); /* with embedded SVG */
filter: url("fileName.svg#contrast200"); /* external SVG */

CSS

Wir verwenden CSS, das den Kontrast von Elementen anhand ihrer Klasse css-filter oder svg-filter anpasst:

css

.css-filter {
  filter: contrast(2);
}

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

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th><code>contrast()</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>