contrast()

amount

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

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

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

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

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

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

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

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

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

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

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

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

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

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