<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>? ]! )

де
<image-tags> = ltr | rtl
<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
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
<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
prefix footnote
Edge Full support 79
prefix footnote
Firefox No support No
Internet Explorer No support No
Opera Full support 15
prefix footnote
Safari Full support 10
footnote
WebView Android Full support 37
prefix footnote
Chrome Android Full support 18
prefix footnote
Firefox for Android No support No
Opera Android Full support 14
prefix footnote
Safari on iOS Full support 9.3
footnote
Samsung Internet Full support 1.0
prefix footnote
element()
Experimental
Chrome No support No
Edge No support No
Firefox Full support 57
prefix
Internet Explorer No support No
Opera No support No
Safari No support No
WebView Android No support No
Chrome Android No support No
Firefox for Android Full support 60
prefix
Opera Android No support No
Safari on iOS No support No
Samsung Internet No support No
<gradient> Chrome Full support 26
Edge Full support 12
prefix
Firefox Full support 3.6
footnote
Internet Explorer Full support 10
prefix
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
footnote
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 No
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 No
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
footnote
Internet Explorer Full support 10
footnote
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
footnote
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 No
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 No
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 No
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
footnote
Internet Explorer Full support 10
footnote
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
footnote
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
footnote
Internet Explorer Full support 10
Opera Full support 15
Safari No support No
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 No
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 No
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 No
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 No
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
footnote
Internet Explorer Full support 10
footnote
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
footnote
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 No
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 No
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 No
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
footnote
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
footnote
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
footnote
Internet Explorer Full support 10
Opera Full support 15
Safari No support No
WebView Android Full support 37
Chrome Android Full support 26
Firefox for Android Full support 16
footnote
Opera Android Full support 14
Safari on iOS No support No
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 No
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 No
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 No
Edge No support No
Firefox No support No
footnote
Internet Explorer No support No
Opera No support No
Safari No support No
WebView Android No support No
Chrome Android No support No
Firefox for Android No support No
footnote
Opera Android No support No
Safari on iOS No support No
Samsung Internet No support No
image-set() Chrome Full support 21
prefix
Edge Full support 79
prefix
Firefox Full support 88
footnote
Internet Explorer No support No
Opera Full support 15
prefix
Safari Partial support 6
prefix footnote
WebView Android Full support 4.4
prefix
Chrome Android Full support 25
prefix
Firefox for Android Full support 88
footnote
Opera Android Full support 14
prefix
Safari on iOS Partial support 6
prefix footnote
Samsung Internet Full support 1.5
prefix
paint() Chrome Full support 65
Edge Full support 79
Firefox No support No
Internet Explorer No support No
Opera Full support 52
Safari No support No
WebView Android Full support 65
Chrome Android Full support 65
Firefox for Android No support No
Opera Android Full support 47
Safari on iOS No support No
Samsung Internet Full support 9.2

Дивіться також