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

sepia() CSS-функция преобразует исходное изображение в сепию, придавая ему более тёплый жёлто-коричневый оттенок. Результатом является <filter-function>.

Попробуйте

filter: sepia(0);

filter: sepia(0.2);

filter: sepia(60%);

filter: sepia(1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Синтаксис

sepia(amount)

Параметры

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

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

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

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

Примеры

Примеры допустимых значений для sepia()

sepia(0)     /* No effect */
sepia(.65)   /* 65% sepia */

sepia()      /* Completely sepia */
sepia(100%)

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

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

См. также

Другие функции <filter-function>, которые можно использовать в значениях свойств filter и backdrop-filter:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()