CSS function paint

Опис

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

Для коректної роботи paint() необхідно вказати джерело малюнка за допомогою параметра paint-source. Це може бути:

• URL-адреса зображення,
• малюнок SVG,
• інша властивість CSS, яка пов'язана з фарбуванням (наприклад, var(--color)).

• Функція paint() передає це джерело малюнка як значення властивості фарбування елемента.

Приклад використання:

background-color: paint(url("image.png"));

Тут ми встановлюємо фоновий колір елемента, використовуючи зображення "image.png" як джерело фарбування.

правити

Порада

Використовуйте вирази, щоб динамічно змінювати джерело малюнка для paint(). Наприклад, paint(var(--image-source)) дозволяє використовувати змінну CSS для вибору джерела малюнка.

автор: Bond правити

Порада

Експериментуйте з різними типами джерел малюнків, такими як зображення, малюнок SVG або навіть градієнти, щоб отримати цікаві ефекти.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

paint(<paint-source>);

Функція paint може отримувати єдине значення:

<paint-source>

URL-адреса зображення або малюнок SVG.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	65	52	79

Підтримка: мобільні переглядачі

Переглядач
	65	65

Приклади

+ запропонувати свій приклад у пісочниці