Функція image() в CSS — картинка в стилях і межі підтримки
Опис
Експериментальна технологія: Перед використанням уважно перевірте таблицю сумісності з браузерами.
Функція image() в CSS надає розширені можливості для визначення зображень у стилі CSS. Вона дозволяє вам вказувати напрямок зображення, відображати лише певну частину зображення за допомогою фрагментів медіа та використовувати колір як запасний фон, коли зображення не може бути відтворене. Це дозволяє створювати більш гнучкі та виразні стилі для веб-сторінок.
Приклад роботи функції image():
.my-element {
background-image: image(ltr url("image.jpg"), red);
}
У цьому прикладі ми встановлюємо фонове зображення для елементу з класом .my-element. Зображення використовує напрямок зліва направо (ltr) та посилання на зображення "image.jpg". Якщо зображення не може бути завантажене або відтворене, використовується червоний колір (red) як запасний фон.
Загалом, цей приклад демонструє, як функція image() може бути використана для встановлення зображення з додатковими параметрами напрямку та запасного фону.
Загальний опис
автор: NagarD
- Порада
-
Використовуйте функцію
автор: Bondimage()у поєднанні з властивостями CSS, що приймають зображення, для динамічного вибору або зміни зображень на основі умов або подій. - Порада
-
Використовуйте фрагменти медіа, щоб відображати лише певну частину зображення і створювати ефекти кадрування або масштабування.
автор: Bond - Нотатка
-
Переконайтеся, що вказуєте правильні посилання або рядки зображень, щоб функція
автор: Bondimage()змогла коректно відображати зображення.
Синтаксис
image(<image-tags>? [ <image-src>? , <color>? ]!);Функція image може отримувати 3 значень:
-
<image-tags> -
Напрямок зображення:
автор: Bondltr- зліва направо абоrtl- справа наліво. -
<image-src> -
Посилання або шлях до зображення.
автор: Bond -
<color> -
Колір, який використовується як запасний фон, якщо зображення не може бути відтворене.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 2 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Перша група — усі форми з ліда поруч: працює лише image(<колір>), решта відкинута, і коробка лишилась порожньою. Друга показує, де суцільне зображення справді доречне — там, де властивість не приймає кольору: мітка списку, рамка через border-image-source і маска, у якій image(transparent) ховає елемент зовсім. Третя — запасний варіант каскадом: рядок вище лишається, коли image() не спрацював.
HTML
<p class="head">Усі форми з документації поруч. Синя коробка означає «оголошення
прийнято», порожня — «відкинуто цілком»:</p>
<div class="grid">
<figure><div class="box f1"></div><figcaption>image(red)</figcaption></figure>
<figure><div class="box f2"></div><figcaption>image(#00ff00)</figcaption></figure>
<figure><div class="box f3"></div><figcaption>image(currentcolor)</figcaption></figure>
<figure><div class="box f4"></div><figcaption>image(url(a.png), red)</figcaption></figure>
<figure><div class="box f5"></div><figcaption>image(ltr url(a.png), red)</figcaption></figure>
<figure><div class="box f6"></div><figcaption>image(url(a.png))</figcaption></figure>
<figure><div class="box f7"></div><figcaption>image(ltr red)</figcaption></figure>
<figure><div class="box f8"></div><figcaption>image(red 50%)</figcaption></figure>
</div>
<p class="head">Де суцільне зображення справді доречне — там, де кольору
властивість не приймає:</p>
<ul class="list">
<li class="li1">list-style-image: image(#c0392b)</li>
<li class="li2">list-style-image: image(#2f6fd0)</li>
<li>звичайна мітка для порівняння</li>
</ul>
<div class="grid">
<figure>
<div class="box bi">border-image-source</div>
<figcaption>рамка з image(#c0392b)</figcaption>
</figure>
<figure>
<div class="box mk1">видно</div>
<figcaption>mask-image: image(black)</figcaption>
</figure>
<figure>
<div class="box mk2">не видно</div>
<figcaption>mask-image: image(transparent)</figcaption>
</figure>
</div>
<p class="head">Запасний варіант робиться каскадом: перший рядок лишається там,
де другий відкинуто:</p>
<div class="grid">
<figure>
<div class="box fb1"></div>
<figcaption>градієнт, потім image(url(a.png), red) — лишився градієнт</figcaption>
</figure>
<figure>
<div class="box fb2"></div>
<figcaption>градієнт, потім image(red) — перекрито суцільним</figcaption>
</figure>
</div>CSS
.head {
margin: 20px 0 8px;
max-width: 620px;
color: #5a6472;
font-size: .9em;
}
.grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
figure {
margin: 0;
width: 150px;
}
figcaption {
margin-top: 6px;
color: #5a6472;
font: 12px/1.35 ui-monospace, monospace;
}
.box {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 90px;
background: #f2f4f8;
border: 1px dashed #b9c6d8;
color: #fff;
font: 600 12px/1 ui-monospace, monospace;
}
.f1 { background-image: image(red); }
.f2 { background-image: image(#00ff00); }
.f3 { color: #2f6fd0; background-image: image(currentcolor); }
.f4 { background-image: image(url(a.png), red); }
.f5 { background-image: image(ltr url(a.png), red); }
.f6 { background-image: image(url(a.png)); }
.f7 { background-image: image(ltr red); }
.f8 { background-image: image(red 50%); }
.list {
margin: 0;
padding-left: 30px;
color: #333;
font: 13px/1.9 ui-monospace, monospace;
}
.li1 { list-style-image: image(#c0392b); }
.li2 { list-style-image: image(#2f6fd0); }
.bi {
border: 10px solid transparent;
border-image-source: image(#c0392b);
border-image-slice: 1;
background: #f6f9ff;
color: #333;
}
.mk1 {
background: #3a9a4f;
border: 0;
mask-image: image(black);
}
.mk2 {
background: #3a9a4f;
border: 0;
mask-image: image(transparent);
}
.fb1 {
background-image: linear-gradient(135deg, #2f6fd0, #3a9a4f);
background-image: image(url(a.png), red);
}
.fb2 {
background-image: linear-gradient(135deg, #2f6fd0, #3a9a4f);
background-image: image(#e08a1e);
}Коментарі
Коментарів ще немає — будьте першим!