contrast()

Die contrast() CSS Funktion passt den Kontrast des Eingabebildes an. Ihr Ergebnis ist eine <filter-function>.

Syntax

css

contrast(amount)

Werte

amount: Der Kontrast des Ergebnisses, angegeben als <number> oder <percentage>. Ein Wert unter 100% verringert den Kontrast, während ein Wert über 100% ihn erhöht. Ein Wert von 0 oder 0% erzeugt ein komplett graues Bild, während ein Wert von 1 oder 100% das Eingabebild unverändert lässt. Negative Werte sind nicht erlaubt. Der Anfangswert für Interpolation ist 1.

Folgende Paare von Werten sind äquivalent:

css

contrast(0) /* Completely gray */
contrast(0%)

contrast(0.65) /* 65% contrast */
contrast(65%)

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

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

Formale Syntax

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

Dieses Beispiel wendet einen contrast()-Filter über die backdrop-filter CSS-Eigenschaft auf den Absatz und den monospaced Text an, wodurch die Farben des Bereichs hinter dem <p> und <code> verschoben werden.

css

.container {
  background: url(image.jpg) no-repeat center / contain #339;
}
p {
  backdrop-filter: contrast(0.5);
}
code {
  backdrop-filter: contrast(0.15);
}

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

<div class="container" style="background-image: url(unity_for_the_people.jpg);">
  <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>

Mit der filter-Eigenschaft

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

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>

Mit url() und dem SVG-Kontrastfilter

Das SVG-Element <filter> wird verwendet, um benutzerdefinierte Filtereffekte zu definieren, die dann mit id referenziert werden können. Das <filter>-Primitive <feComponentTransfer> ermöglicht die Farbumwandlung auf Pixelebene. Gegeben sind folgende:

svg

  <filter id="contrast">
    <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>

.svgFilterLive {
  filter: url(#contrast2);
}

Diese Werte ergeben die gleichen Ergebnisse:

css

filter: contrast(200%);
filter: url(#contrast); /* with embedded SVG */
filter: url(folder/fileName.svg#contrast); /* external svg filter definition */

Dieses Beispiel zeigt drei Bilder: das Bild mit einer contrast()-Filterfunktion angewendet, das Bild mit einem äquivalenten url()-Filter angewendet und die Originalbilder zum Vergleich:

<table cellpadding="5">
  <thead>
    <tr>
      <th><code>contrast()</code></th>
      <th><code>url()</code></th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          style="filter: contrast(200%)"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          class="svgFilterLive"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
        <svg
          xmlns="http://www.w3.org/2000/svg"
          id="svg"
          viewBox="0 0 240 151"
          height="0"
          width="0"
          style="overflow: visible"
          color-interpolation-filters="sRGB">
          <filter id="contrast2">
            <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>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

CSS Filtereffekte-Modul
Die anderen <filter-function>-Funktionen, die in Werten der filter und backdrop-filter Eigenschaften verwendet werden können, sind: