<image>

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

Синтаксис

Тип данных <image> может быть представлен любым из следующих способов:

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

Описание

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> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Примеры

Валидные изображения

url(test.jpg)               /* A <url>, as long as test.jpg is an actual image */
linear-gradient(blue, red)  /* A <gradient> */
element(#real-id)            /* A part of the webpage, referenced with the element() function,
                               if "real-id" is an existing ID on the page */
image(ltr 'arrow.png#xywh=0,0,16,16', red)
                            /* A section 16x16 section of <url>, starting from the top, left of the original
                               image as long as arrow.png is a supported image, otherwise a solid
                               red swatch. If language is rtl, the image will be horizontally flipped. */
cross-fade(20% url(twenty.png), url(eighty.png))
                            /* cross faded images, with twenty being 20% opaque
                               and eighty being 80% opaque. */
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
                            /* a selection of images with varying resolutions */

Невалидные изображения

no-url.jpg           /* An image file must be defined using the url() function. */
url(report.pdf)      /* A file pointed to by the url() function must be an image. */
element(#fakeid)     /* An element ID must be an existing ID on the page. */
image(z.jpg#xy=0,0)  /* The spatial fragment must be written in the format of xywh=#,#,#,# */
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* every image in an image set must have a different resolution */

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

Спецификация
CSS Images Module Level 3 # image-values

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`image`	1	12	1	2	1	18	4	11	1	1.0	4.4
`cross-fade`	17 ["Поддержка оригинального двойного изображения только с реализацией в процентах.", "См. ошибку 40470742 для поддержки функции `cross-fade()` без префиксов."]	79 ["Поддержка оригинального двойного изображения только с реализацией в процентах.", "См. ошибку 40470742 для поддержки функции `cross-fade()` без префиксов."]	Нет	15 ["Поддержка оригинального двойного изображения только с реализацией в процентах.", "См. ошибку 40470742 для поддержки функции `cross-fade()` без префиксов."]	10 Поддержка оригинального двойного изображения только с реализацией в процентах. 5.1 Поддержка оригинального двойного изображения только с реализацией в процентах.	18 ["Поддержка оригинального двойного изображения только с реализацией в процентах.", "См. ошибку 40470742 для поддержки функции `cross-fade()` без префиксов."]	Нет	14 ["Поддержка оригинального двойного изображения только с реализацией в процентах.", "См. ошибку 40470742 для поддержки функции `cross-fade()` без префиксов."]	9.3 Поддержка оригинального двойного изображения только с реализацией в процентах. 5 Поддержка оригинального двойного изображения только с реализацией в процентах.	1.0 ["Поддержка оригинального двойного изображения только с реализацией в процентах.", "См. ошибку 40470742 для поддержки функции `cross-fade()` без префиксов."]	4.4 ["Поддержка оригинального двойного изображения только с реализацией в процентах.", "См. ошибку 40470742 для поддержки функции `cross-fade()` без префиксов."]
`element`	Нет	Нет	57 29–57 `-moz-element()` ограничено до `background-image`, `background`, `border-image` и `border-image-source`. 4–29 `-moz-element()` ограничено до `background-image` и `background`.	Нет	Нет	Нет	60 29–60 `-moz-element()` ограничено до `background-image`, `background`, `border-image` и `border-image-source`. 4–29 `-moz-element()` ограничено до `background-image` и `background`.	Нет	Нет	Нет
`gradient`	2610	12	3.6 Градиенты ограничены до `background-image`, `border-image` и `mask-image`.	12.11511–15	75.1	2618	4 Градиенты ограничены до `background-image`, `border-image` и `mask-image`.	12.11411–14	75	1.51.0	≤37≤37
`image`	Нет	Нет	Нет См. ошибку 703217.	Нет	Нет	Нет	Нет См. ошибку 703217.	Нет	Нет	Нет	Нет
`image-set`	113113 20–113 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения.	113113 79–113 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения.	8990 88–89 Функция `type()` не поддерживается как аргумент для `image-set()`.	9999 15–99 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения.	1717 14–17 Функция `type()` не поддерживается как аргумент для `image-set()`. 14–17 Функция `type()` не поддерживается как аргумент для `image-set()`. 10.1–14 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения. 6–14 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения.	113113 25–113 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения.	8990 88–89 Функция `type()` не поддерживается как аргумент для `image-set()`.	7676 14–76 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения.	1717 14–17 Функция `type()` не поддерживается как аргумент для `image-set()`. 14–17 Функция `type()` не поддерживается как аргумент для `image-set()`. 10.3–14 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения. 6–14 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения.	23.023.0 1.5–23.0 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения.	113113 4.4–113 Поддержка только изображений `url` и `x` — единственная поддерживаемая единица измерения.
`paint`	65	79	Нет	52	Нет	65	Нет	47	Нет	9.2	65

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/image