<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) /* Кожне зображення в наборі повинно мати іншу роздільну здатність */
Специфікації
Специфікація | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Unknown specification
Сумісність із браузерами
Дивіться також |