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

CSS function brightness()

Опис

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

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

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

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

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

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

Порада:

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

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

Синтаксис

brightness(<percentage>)
<percentage>

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

Переглядачі

Переглядач

18

35

6

15

12
Переглядач

4.4

53

35

6

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

Приклади


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

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

Документи

Зв'язок