`contrast()` CSS-Funktion

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.

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

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

contrast(amount)

Werte

amount Optional: Der Kontrast des Ergebnisses, angegeben als <number> oder als <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 vollständig graues Bild, während ein Wert von 1 oder 100% die Eingabe unverändert lässt. Negative Werte sind nicht erlaubt. Der Anfangswert für die Interpolation ist 1. Der Standardwert ist 1.

Die folgenden Paare sind gleichwertige Werte:

css

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

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

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

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

Formale Syntax

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

In diesem Beispiel wird ein contrast()-Filter über die backdrop-filter CSS-Eigenschaft auf den Absatz und den monospace Text angewendet, der die Farbverschiebung auf den Bereich hinter dem <p> und <code> durchführt.

css

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

.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>

Mit der filter-Eigenschaft

In diesem Beispiel wird ein contrast()-Filter über die filter CSS-Eigenschaft angewendet, wodurch 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 <filter>-Element wird verwendet, um benutzerdefinierte Filtereffekte zu definieren, die dann durch die id referenziert werden können. Das <filter>-Element <feComponentTransfer> ermöglicht eine pixelgenaue Farbzuordnung. Gegeben:

html

<svg
  xmlns="http://www.w3.org/2000/svg"
  id="svg"
  viewBox="0 0 240 151"
  height="0"
  width="0"
  overflow="visible"
  color-interpolation-filters="sRGB">
  <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>
</svg>

Diese Werte erzeugen 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, das Bild mit einem äquivalenten url()-Filter und die Originalbilder zum Vergleich:

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

.css-filter {
  filter: contrast(200%);
}
.svg-filter {
  filter: url("#contrast");
}

th,
td {
  padding: 5px;
}
svg:not(:root) {
  display: none;
}

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

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

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

`contrast()` CSS-Funktion

Probieren Sie es aus

Syntax

Werte

Formale Syntax

Beispiele

Mit der backdrop-filter-Eigenschaft

Mit der filter-Eigenschaft

Mit url() und dem SVG-Kontrastfilter

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN

contrast() CSS-Funktion

Help improve MDN

`contrast()` CSS-Funktion