saturate()

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2016 года.

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

Примечание: saturate() задается как матричная операция над цветом RGB. Она фактически не преобразует цвет в модель HSL, что является нелинейной операцией. Поэтому может не сохранять оттенок или светлоту исходного цвета.

Попробовать

Синтаксис

saturate(amount)

Параметры

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

Примеры

Примеры корректных значений для saturate()

saturate(0)     /* Completely unsaturated */
saturate(.4)    /* 40% saturated */
saturate(100%)  /* No effect */
saturate(200%)  /* Double saturation */

saturate() не сохраняет оттенок или светлоту

Диаграмма ниже сравнивает два цветовых градиента с hsl(0 50% 50%) как средней точкой: первый сгенерирован с использованием saturate(), а второй с фактическими значениями HSL. Обратите внимание, как градиент saturate() показывает различия в оттенке и светлоте к обоим концам.

<div>
  <p>Using <code>saturate()</code></p>
  <div id="saturate"></div>
</div>
<div>
  <p>Using <code>hsl()</code></p>
  <div id="hsl"></div>
</div>

const saturate = document.getElementById("saturate");
const hsl = document.getElementById("hsl");

for (let i = 0; i <= 200; i++) {
  const div1 = document.createElement("div");
  div1.style.backgroundColor = `hsl(0 ${i / 2}% 50%)`;
  hsl.appendChild(div1);

  const div2 = document.createElement("div");
  div2.style.backgroundColor = "hsl(0 50% 50%)";
  div2.style.filter = `saturate(${i}%)`;
  saturate.appendChild(div2);
}

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

Спецификация
Модуль эффектов фильтра уровня 1 # funcdef-filter-saturate

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`saturate`	18	12	35	15	6	53	35	14	6	6.0	4.4

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate