<image>

Тип даних CSS <image> представляє двовимірне зображення.

Синтаксис

Тип даних <image> може бути представлений у будь-який з наступних способів:

• Зображенням, заданим типом даних <url>
• Типом даних <gradient>
• Частиною вебсторінки, означеною функцією element()
• Зображенням, фрагментом зображення або суцільною одноколірною латкою, означеними функцією image()
• Сумішшю двох або більше зображень, означеною функцією cross-fade().
• Вибіркою зображень, відібраною на основі роздільної здатності, означеною функцією image-set().
• Згенерованим за допомогою функції paint() ворклетом малювання.

Опис

CSS може обробляти зображення наступних ґатунків:

• Зображення з природними розмірами, як то JPEG, PNG та інші растрові формати.
• Зображення з кількома природними розмірами, що існують в декількох версіях всередині одного файлу, як то певні формати .ico. (У такому випадку природними розмірами будуть розміри найбільшого за площею та найподібнішого за співвідношенням сторін до контейнерних рамок зображення.)
• Зображення без природних розмірів, але з природним співвідношенням сторін – ширини й висоти, подібно до SVG та інших векторних форматів.
• Зображення і без природних розмірів, і без природного співвідношення сторін, як то градієнт CSS.

CSS визначає конкретний розмір об'єкта на основі його (1) природних розмірів; (2) його заданих розмірів, означених властивостями CSS штибу width, height і background-size; і (3) його усталеного розміру, визначеного ґатунком властивості, з якою використовується зображення:

Конкретний розмір об'єкта обчислюється за наступним алгоритмом:

• Якщо заданий розмір визначає і ширину, і висоту, то ці значення стають конкретними розмірами об'єкта.
• Якщо заданий розмір визначає лише ширину або лише висоту, то відсутнє значення визначається на основі: природного співвідношення сторін — якщо воно є, — природних розмірів — якщо задане значення збігається з відповідним природним розміром, — або усталеним розміром об'єкта.
• Якщо заданий розмір не визначає ані ширини, ані висоти, то конкретні розміри об'єкта обчислюються так, щоб вони відповідали природному співвідношенню сторін зображення, але не перевищували усталений розмір об'єкта за жодною з координат. Якщо зображення не має природного співвідношення сторін, то застосовується природне співвідношення сторін об'єкта, до котрого це зображення застосовується; якщо цей об'єкт не має природного співвідношення сторін, то відсутні значення висоти чи ширини беруться з усталених розмірів об'єкта.

[!NOTE] Не всі браузери підтримують кожен тип зображення для кожної властивості. Деталі в Сумісності з браузерами.

Доступність

Браузери не надають допоміжним технологіям жодної конкретної інформації про зображення тла. Це важливо перш за все для читачів з екрана, адже читач з екрана не оголосить присутність такого зображення, а отже – нічого не донесе користувачеві. Якщо зображення містить інформацію, котра є критичною для розуміння загального призначення сторінки, краще описати її в документі семантично.

• Розуміння WCAG, пояснення Настанови 1.1
• Розуміння критерію успіху 1.1.1 | W3C Розуміння WCAG 2.0

Формальний синтаксис

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(#real-id)            /* Частина вебсторінки, на котру вказано за допомогою функції element(),
                               за умови того, що ID "real-id" фактично існує на сторінці */
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)
                            /* добірка зображень з різною роздільною здатністю */

Недійсні зображення

no-url.jpg            /* Файл зображення повинен бути означений за допомогою функції url(). */
url(report.pdf)      /* Файл, на котрий вказує функція url(), повинен бути зображенням. */
element(#fakeid)     /* ID елемента повинен існувати на сторінці. */
image(z.jpg#xy=0,0)  /* Фрагмент повинен бути записаний у форматі xywh=#,#,#,# */
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* Кожне зображення в наборі повинно мати іншу роздільну здатність */

Специфікації

Сумісність із браузерами

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

• <gradient>
• element()
• image()
• image-set()
• cross-fade()