CSS-функция `contrast()`

contrast() CSS-функция регулирует контрастность входного изображения. Результатом является <filter-function>.

Попробуйте

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>

Синтаксис

contrast(amount)

Значения

amount Необязательно

Контрастность результата, заданная как <number> или <percentage>. Значение меньше 100% уменьшает контрастность, а значение больше 100% увеличивает её. Значение 0 или 0% создаёт полностью серое изображение, а значение 1 или 100% оставляет входное изображение без изменений. Отрицательные значения не допускаются. Начальное значение для интерполяции — 1. Значение по умолчанию — 1.

Ниже приведены пары эквивалентных значений:

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%)

Формальный синтаксис

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

Примеры

Свойство backdrop-filter

В этом примере фильтр contrast() применяется к абзацу и моноширинному тексту с помощью CSS-свойства backdrop-filter, изменяя цвета области за <p> и <code>.

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

Свойство filter

В этом примере фильтр contrast() применяется с помощью CSS-свойства filter, изменяя контрастность всего элемента за счёт смещения цветов, включая содержимое, границу, фон и тени.

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>

url() и SVG-фильтр контрастности

Элемент SVG <filter> используется для определения пользовательских эффектов фильтрации, на которые затем можно ссылаться с помощью id. Примитив <feComponentTransfer> элемента <filter> позволяет выполнять переназначение цветов на уровне пикселей. Рассмотрим следующий код:

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

Эти значения дают одинаковый результат:

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

В этом примере показаны три изображения: изображение с применённой функцией фильтра contrast(), изображение с применённым эквивалентным фильтром url() и исходные изображения для сравнения:

<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;
}

Спецификации

Совместимость с браузерами

См. также

• Модуль эффектов фильтрации CSS
• Другие функции <filter-function>, которые можно использовать в значениях свойств filter и backdrop-filter:
  • blur()
  • brightness()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()