CSS function paint()
Опис
CSS-функція paint() дозволяє використовувати додаткове джерело малюнка для фарбування елементів веб-сторінки. Вона відкриває перед розробниками нові можливості для створення ефектів фарбування, які ідуть далеко за рамки традиційних кольорів та градієнтів. Вона пропонує гнучкіший підхід до дизайну, оскільки дозволяє інтегрувати різноманітні візуальні ресурси безпосередньо у стилі веб-сторінки.
Для коректної роботи paint() необхідно вказати джерело малюнка за допомогою параметра paint-source. Це може бути:
- URL-адреса зображення,
- малюнок SVG,
- інша властивість CSS, яка пов'язана з фарбуванням (наприклад,
var(--color)). Функція
paint()передає це джерело малюнка як значення властивості фарбування елемента.
Приклад використання:
background-color: paint(url("image.png"));
Тут ми встановлюємо фоновий колір елемента, використовуючи зображення "image.png" як джерело фарбування.
| Порада: | Використовуйте вирази, щоб динамічно змінювати джерело малюнка для |
| Порада: | Експериментуйте з різними типами джерел малюнків, такими як зображення, малюнок SVG або навіть градієнти, щоб отримати цікаві ефекти. |
Синтаксис
paint(<paint-source>);<paint-source>URL-адреса зображення або малюнок SVG.
Переглядачі
| Переглядач | |||
|---|---|---|---|
65 |
52 |
79 |
| Переглядач | ||
|---|---|---|
65 |
65 |
Мобільних переглядачів ще не додано.
Приклади
Наведіть курсор на елемент, щоб побачити зміну.
Один з елементів використовує функцію paint() для зміни фонового зображення.