css.in.ua
Підтримати

CSS function contrast()

Опис

Функція contrast() є частиною модуля CSS Filter Effects і використовується для зміни контрастності елемента. Вона приймає один аргумент - коефіцієнт контрастності, який визначає, наскільки контрастним буде елемент.

Значення коефіцієнта контрастності (percentage) вказується як параметр функції contrast(). Можна використовувати значення від 0% до 100% та значення більше 100%. Значення 100% залишить контрастність незмінною, значення менше 100% зменшить контрастність, а значення більше 100% збільшить контрастність.

Функція contrast() може бути використана для створення ефекту підвищення або зниження контрастності елементів на сторінці.

Декілька прикладів коректного використання функції contrast():

  • contrast(50%): Зменшення контрастності елемента до 50%.
  • contrast(200%): Збільшення контрастності елемента до 200%.

Зверніть увагу, що значення передається у відсотках (%).

Порада:

Використовуйте функцію contrast() разом з іншими фільтрами CSS, такими як blur(), brightness() або saturate(), для створення складних візуальних ефектів.
Нотатка:

Ефект contrast() також можна застосовувати до псевдоелементів, таких як ::before або ::after, для досягнення бажаного візуального ефекту.

Синтаксис

contrast(<percentage>)
<percentage>

Значення у відсотках.

Переглядачі

Переглядач

18

35

6

15

12
Переглядач

4.4

53

35

6

Мобільних переглядачів ще не додано.

Приклади


При наведенні курсору на картинки, їх контрастність змінюється.

Два однакові елементи, але один з них має змінену контрастність за допомогою функції.

Спільнота

Зв'язок