<image>
Тип даних CSS <image>
представляє двовимірне зображення.
Синтаксис
Тип даних <image>
може бути представлений у будь-який з наступних способів:
- Зображенням, заданим типом даних
url()
- Типом даних
<gradient>
- Частиною вебсторінки, означеною функцією
element()
- Зображенням, фрагментом зображення або суцільною одноколірною латкою, означеними функцією
image()
- Сумішшю двох або більше зображень, означеною функцією
cross-fade()
. - Вибіркою зображень, відібраною на основі роздільної здатності, означеною функцією
image-set()
.
Опис
CSS може обробляти зображення наступних ґатунків:
- Зображення з природними розмірами, як то JPEG, PNG та інші растрові формати.
- Зображення з кількома природними розмірами, що існують в декількох версіях всередині одного файлу, як то певні формати .ico. (У такому випадку природними розмірами будуть розміри найбільшого за площею та найподібнішого за співвідношенням сторін до контейнерних рамок зображення.)
- Зображення без природних розмірів, але з природним співвідношенням сторін – ширини й висоти, подібно до SVG та інших векторних форматів.
- Зображення і без природних розмірів, і без природного співвідношення сторін, як то градієнт CSS.
CSS визначає конкретний розмір об'єкта на основі його (1) природних розмірів; (2) його заданих розмірів, означених властивостями CSS штибу width
, height
і background-size
; і (3) його усталеного розміру, визначеного ґатунком властивості, з якою використовується зображення:
Ґатунок об'єкта (властивість CSS) | Усталені розміри об'єкта |
---|---|
background-image |
Розмір області позиціонування елемента |
list-style-image |
Розмір символу 1em |
border-image-source |
Розмір області зображення меж елемента |
cursor |
Визначений браузером розмір, що відповідає розмірові звичного курсора в системі клієнта |
mask-image |
? |
shape-outside |
? |
mask-border-source |
? |
symbols() для @counter-style |
Ризикована можливість. Коли підтримується, то – визначений браузером розмір, що відповідає розмірові звичного курсора в системі клієнта |
content для псевдоелемента (::after /::before ) |
Прямокутник 300px × 150px |
Конкретний розмір об'єкта обчислюється за наступним алгоритмом:
- Якщо заданий розмір визначає і ширину, і висоту, то ці значення стають конкретними розмірами об'єкта.
- Якщо заданий розмір визначає лише ширину або лише висоту, то відсутнє значення визначається на основі: природного співвідношення сторін — якщо воно є, — природних розмірів — якщо задане значення збігається з відповідним природним розміром, — або усталеним розміром об'єкта.
- Якщо заданий розмір не визначає ані ширини, ані висоти, то конкретні розміри об'єкта обчислюються так, щоб вони відповідали природному співвідношенню сторін зображення, але не перевищували усталений розмір об'єкта за жодною з координат. Якщо зображення не має природного співвідношення сторін, то застосовується природне співвідношення сторін об'єкта, до котрого це зображення застосовується; якщо цей об'єкт не має природного співвідношення сторін, то відсутні значення висоти чи ширини беруться з усталених розмірів об'єкта.
Примітка: Не всі браузери підтримують кожен тип зображення для кожної властивості. Деталі в Сумісності з браузерами.
Занепокоєння щодо доступності
Браузери не надають допоміжним технологіям жодної конкретної інформації про зображення тла. Це важливо перш за все для читачів з екрана, адже читач з екрана не оголосить присутність такого зображення, а отже – нічого не донесе користувачеві. Якщо зображення містить інформацію, котра є критичною для розуміння загального призначення сторінки, краще описати її в документі семантично.
Формальний синтаксис
image( <image-tags>? [ <image-src>? , <color>? ]! )де
| rtl
= ltr
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>де
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )де
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Приклади
Дійсні зображення
url(test.jpg) /* <url>, за умови того, що test.jpg справді є зображенням */
linear-gradient(blue, red) /* <gradient> */
element(#realid) /* Частина вебсторінки, на котру вказано за допомогою функції element(),
за умови того, що ID "realid" фактично існує на сторінці */
image(ltr 'arrow.png#xywh=0,0,16,16', red)
/* Ділянка <url> 16x16, починаючи від верхнього лівого кута вихідного
зображення, за умови того, що arrow.png – підтримуване зображення, інакше –
суцільна червона латка. Якщо мова має письмо справа наліво, то зображення буде віддзеркалено по горизонталі. */
cross-fade(20% url(twenty.png), url(eighty.png))
/* зображення з переходом, де twenty має 20% непрозорості,
а eighty – 80% непрозорості. */
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
/* добірка зображень з різною роздільною здатністю */
Недійсні зображення
nourl.jpg /* Файл зображення повинен бути означений за допомогою функції url(). */
url(report.pdf) /* Файл, на котрий вказує функція url(), повинен бути зображенням. */
element(#fakeid) /* ID елемента повинен існувати на сторінці. */
image(z.jpg#xy=0,0) /* Фрагмент повинен бути записаний у форматі xywh=#,#,#,# */
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* Кожне зображення в наборі повинно мати іншу роздільну здатність */
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<image>
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 10 | Opera Full support 2 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 11 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
cross-fade()
|
Chrome Full support 17 | Edge Full support 79 | Firefox No support Ні | Internet Explorer No support Ні | Opera Full support 15 | Safari Full support 10 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android No support Ні | Opera Android Full support 14 | Safari on iOS Full support 9.3 | Samsung Internet Full support 1.0 |
element()
|
Chrome No support Ні | Edge No support Ні | Firefox Full support 57 | Internet Explorer No support Ні | Opera No support Ні | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android Full support 60 | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
<gradient>
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 3.6 | Internet Explorer Full support 10 | Opera Full support 12.1 | Safari Full support 7 | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox for Android Full support 4 | Opera Android Full support 12.1 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
conic-gradient()
|
Chrome Full support 69 | Edge Full support 79 | Firefox Full support 83 | Internet Explorer No support Ні | Opera Full support 56 | Safari Full support 12.1 | WebView Android Full support 69 | Chrome Android Full support 69 | Firefox for Android Full support 83 | Opera Android Full support 48 | Safari on iOS Full support 12.2 | Samsung Internet Full support 10.0 |
Double-position color stops
|
Chrome Full support 72 | Edge Full support 79 | Firefox Full support 83 | Internet Explorer No support Ні | Opera Full support 60 | Safari Full support 12.1 | WebView Android Full support 72 | Chrome Android Full support 72 | Firefox for Android Full support 83 | Opera Android Full support 51 | Safari on iOS Full support 12.2 | Samsung Internet Full support 11.0 |
linear-gradient()
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 16 | Internet Explorer Full support 10 | Opera Full support 12.1 | Safari Full support 7 | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox for Android Full support 16 | Opera Android Full support 12.1 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
Double-position color stops
|
Chrome Full support 71 | Edge Full support 79 | Firefox Full support 64 | Internet Explorer No support Ні | Opera Full support 58 | Safari Full support 12.1 | WebView Android Full support 71 | Chrome Android Full support 71 | Firefox for Android Full support 64 | Opera Android Full support 50 | Safari on iOS Full support 12.2 | Samsung Internet Full support 10.0 |
Interpolation Hints / Gradient Midpoints
|
Chrome Full support 40 | Edge Full support 79 | Firefox Full support 36 | Internet Explorer No support Ні | Opera Full support 27 | Safari Full support 7 | WebView Android Full support 40 | Chrome Android Full support 40 | Firefox for Android Full support 36 | Opera Android Full support 27 | Safari on iOS Full support 7 | Samsung Internet Full support 4.0 |
to keyword
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 10 | Internet Explorer Full support 10 | Opera Full support 12.1 | Safari Full support 7 | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox for Android Full support 10 | Opera Android Full support 14 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
Unitless 0 for <angle>
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 55 | Internet Explorer No support Ні | Opera Full support 16 | Safari Full support 7 | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox for Android Full support 55 | Opera Android Full support 14 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
radial-gradient()
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 16 | Internet Explorer Full support 10 | Opera Full support 12.1 | Safari Full support 7 | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox for Android Full support 16 | Opera Android Full support 12.1 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
at syntax
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 16 | Internet Explorer Full support 10 | Opera Full support 15 | Safari No support Ні | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox for Android Full support 16 | Opera Android Full support 14 | Safari on iOS No support Ні | Samsung Internet Full support 1.5 |
Double-position color stops
|
Chrome Full support 71 | Edge Full support 79 | Firefox Full support 64 | Internet Explorer No support Ні | Opera Full support 58 | Safari Full support 12.1 | WebView Android Full support 71 | Chrome Android Full support 71 | Firefox for Android Full support 64 | Opera Android Full support 50 | Safari on iOS Full support 12.2 | Samsung Internet Full support 10.0 |
Interpolation Hints / Gradient Midpoints
|
Chrome Full support 40 | Edge Full support 79 | Firefox Full support 36 | Internet Explorer No support Ні | Opera Full support 27 | Safari Full support 7 | WebView Android Full support 40 | Chrome Android Full support 40 | Firefox for Android Full support 36 | Opera Android Full support 27 | Safari on iOS Full support 7 | Samsung Internet Full support 4.0 |
repeating-conic-gradient()
|
Chrome Full support 69 | Edge Full support 79 | Firefox Full support 83 | Internet Explorer No support Ні | Opera Full support 56 | Safari Full support 12.1 | WebView Android Full support 69 | Chrome Android Full support 69 | Firefox for Android Full support 83 | Opera Android Full support 48 | Safari on iOS Full support 12.2 | Samsung Internet Full support 10.0 |
repeating-linear-gradient()
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 16 | Internet Explorer Full support 10 | Opera Full support 12.1 | Safari Full support 7 | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox for Android Full support 16 | Opera Android Full support 12.1 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
Double-position color stops
|
Chrome Full support 71 | Edge Full support 79 | Firefox Full support 64 | Internet Explorer No support Ні | Opera Full support 58 | Safari Full support 12.1 | WebView Android Full support 71 | Chrome Android Full support 71 | Firefox for Android Full support 64 | Opera Android Full support 50 | Safari on iOS Full support 12.2 | Samsung Internet Full support 10.0 |
Interpolation Hints / Gradient Midpoints
|
Chrome Full support 40 | Edge Full support 79 | Firefox Full support 36 | Internet Explorer No support Ні | Opera Full support 27 | Safari Full support 7 | WebView Android Full support 40 | Chrome Android Full support 40 | Firefox for Android Full support 36 | Opera Android Full support 27 | Safari on iOS Full support 7 | Samsung Internet Full support 4.0 |
to keyword
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 10 | Internet Explorer Full support 10 | Opera Full support 12.1 | Safari Full support 7 | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox for Android Full support 10 | Opera Android Full support 14 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
Unitless 0 for <angle>
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 55 | Internet Explorer No support Ні | Opera Full support 16 | Safari Full support 7 | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox for Android Full support 55 | Opera Android Full support 14 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
repeating-radial-gradient()
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 16 | Internet Explorer Full support 10 | Opera Full support 12.1 | Safari Full support 7 | WebView Android Full support 4.4 | Chrome Android Full support 26 | Firefox for Android Full support 16 | Opera Android Full support 12.1 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
at syntax
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 16 | Internet Explorer Full support 10 | Opera Full support 15 | Safari No support Ні | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox for Android Full support 16 | Opera Android Full support 14 | Safari on iOS No support Ні | Samsung Internet Full support 1.5 |
Double-position color stops
|
Chrome Full support 71 | Edge Full support 79 | Firefox Full support 64 | Internet Explorer No support Ні | Opera Full support 58 | Safari Full support 12.1 | WebView Android Full support 71 | Chrome Android Full support 71 | Firefox for Android Full support 64 | Opera Android Full support 50 | Safari on iOS Full support 12.2 | Samsung Internet Full support 10.0 |
Interpolation Hints / Gradient Midpoints
|
Chrome Full support 40 | Edge Full support 79 | Firefox Full support 36 | Internet Explorer No support Ні | Opera Full support 27 | Safari Full support 7 | WebView Android Full support 40 | Chrome Android Full support 40 | Firefox for Android Full support 46 | Opera Android Full support 27 | Safari on iOS Full support 7 | Samsung Internet Full support 4.0 |
image()
|
Chrome No support Ні | Edge No support Ні | Firefox No support Ні | Internet Explorer No support Ні | Opera No support Ні | Safari No support Ні | WebView Android No support Ні | Chrome Android No support Ні | Firefox for Android No support Ні | Opera Android No support Ні | Safari on iOS No support Ні | Samsung Internet No support Ні |
image-set()
|
Chrome Full support 21 | Edge Full support 79 | Firefox Full support 88 | Internet Explorer No support Ні | Opera Full support 15 | Safari Partial support 6 | WebView Android Full support 4.4 | Chrome Android Full support 25 | Firefox for Android Full support 88 | Opera Android Full support 14 | Safari on iOS Partial support 6 | Samsung Internet Full support 1.5 |
paint()
|
Chrome Full support 65 | Edge Full support 79 | Firefox No support Ні | Internet Explorer No support Ні | Opera Full support 52 | Safari No support Ні | WebView Android Full support 65 | Chrome Android Full support 65 | Firefox for Android No support Ні | Opera Android Full support 47 | Safari on iOS No support Ні | Samsung Internet Full support 9.2 |