CSS function image()

Опис

Експериментальна технологія: Перед використанням уважно перевірте таблицю сумісності з браузерами.

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

Приклад роботи функції image():

.my-element {
  background-image: image(ltr url("image.jpg"), red);
}

У цьому прикладі ми встановлюємо фонове зображення для елементу з класом .my-element. Зображення використовує напрямок зліва направо (ltr) та посилання на зображення "image.jpg". Якщо зображення не може бути завантажене або відтворене, використовується червоний колір (red) як запасний фон.

Загалом, цей приклад демонструє, як функція image() може бути використана для встановлення зображення з додатковими параметрами напрямку та запасного фону.

Нотатка:

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

Порада:

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

Порада:

Використовуйте фрагменти медіа, щоб відображати лише певну частину зображення і створювати ефекти кадрування або масштабування.

Синтаксис

image(<image-tags>? [ <image-src>? , <color>? ]!);
<image-tags>

Напрямок зображення: ltr - зліва направо або rtl - справа наліво.

<image-src>

Посилання або шлях до зображення.

<color>

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

Переглядачі

Переглядачів ще не додано.

Приклади

Прикладів ще не додано