Spec-Zone.ru › CSS

CSS-функция `image()`

image() — это CSS-функция, которая задаёт <image> подобно функции url(), но с дополнительными возможностями: можно указать направление изображения, отображать только часть изображения, заданную медиафрагментом, и указать сплошной цвет в качестве запасного варианта на случай, если ни одно из заданных изображений не удастся отобразить.

Примечание: CSS-функцию image() не следует путать с конструктором <code>Image()</code> интерфейса <code>HTMLImageElement</code>.

Синтаксис

/* Basic usage */
image("image1.jpg");
image(url("image2.jpg"));

/* Bidi-sensitive Images */
image(ltr "image1.jpg");
image(rtl "image1.jpg");

/* Image Fallbacks */
image("image1.jpg", black);

/* Image Fragments */
image("image1.jpg#xywh=40,0,20,20");

/* Solid-color Images */
image(rgb(0 0 255 / 0.5)), url("bg-image.png");

Значения

image-tags Необязательный
Направление изображения: ltr для направления слева направо или rtl для направления справа налево.
image-src Необязательный
Ноль или более <url> или <string>, задающих источники изображений, с необязательными идентификаторами фрагментов изображения.
color Необязательный
Цвет, задающий сплошной цвет фона, который используется в качестве запасного варианта, если ни один image-src не найден, не поддерживается или не указан.

Поддержка двунаправленного текста

Первый необязательный параметр нотации image() задаёт направление изображения. Если этот параметр указан и изображение используется на элементе с противоположным направлением текста, изображение будет отражено по горизонтали в режимах горизонтального письма. Если направление не задано, изображение не будет отражено при смене направления языка.

Фрагменты изображений

Одно из ключевых различий между url() и image() заключается в возможности добавить к источнику изображения идентификатор медиафрагмента — начальную точку по осям X и Y, а также ширину и высоту, — чтобы отобразить только часть исходного изображения. Часть изображения, заданная параметром, становится самостоятельным изображением. Синтаксис выглядит так:

background-image: image("my-image.webp#xywh=0,20,40,60");

Фоновым изображением элемента будет часть изображения myImage.webp, начинающаяся в точке с координатами 0px, 20px (в левом верхнем углу) и имеющая ширину 40px и высоту 60px.

Синтаксис медиафрагмента #xywh=#,#,#,# принимает четыре числовых значения, разделённых запятыми. Первые два значения задают координаты X и Y начальной точки создаваемой области. Третье значение задаёт ширину области, а последнее — её высоту. По умолчанию используются значения в пикселях. Определение пространственных измерений в спецификации медиафрагментов указывает, что также будут поддерживаться проценты:

xywh=160,120,320,240        /* results in a 320x240 image at x=160 and y=120 */
xywh=pixel:160,120,320,240  /* results in a 320x240 image at x=160 and y=120 */
xywh=percent:25,25,50,50    /* results in a 50%x50% image at x=25% and y=25% */

Фрагменты изображений можно использовать и в нотации url(). Синтаксис медиафрагментов #xywh=#,#,#,# «обратно совместим»: медиафрагмент будет проигнорирован, если браузер его не распознаёт, и не нарушит вызов источника при использовании с url(). Если браузер не распознаёт синтаксис медиафрагментов, он игнорирует фрагмент и отображает изображение целиком.

Браузеры, распознающие image(), также понимают синтаксис фрагментов. Поэтому, если фрагмент не распознаётся в image(), изображение будет считаться недопустимым.

Запасной цвет

Если вместе с источниками изображений в image() указан цвет, он используется в качестве запасного варианта, если изображения недопустимы и не отображаются. В таких случаях функция image() работает так, словно изображение не задано, создавая изображение сплошного цвета. Например, рассмотрим тёмное изображение, используемое в качестве фона для белого текста. Если изображение не загрузится, для читаемости текста переднего плана может потребоваться тёмный цвет фона.

Можно не указывать источники изображений, задав только цвет: это создаст цветовой образец. В отличие от задания background-color, которое располагается под всеми фоновыми изображениями или позади них, такой способ позволяет накладывать (обычно полупрозрачные) цвета поверх других изображений.

Размер цветового образца можно задать с помощью свойства background-size. Это отличается от background-color, которое задаёт цвет для всего элемента. На размещение как image(color), так и background-color влияют свойства background-clip и background-origin.

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

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )

<image-tags> = 
  ltr |
  rtl

<image-src> = 
  <url> |
  <string>

<color> = 
  <color-base> |
  currentColor |
  <system-color> |
  <light-dark()> |
  <deprecated-system-color>

<color-base> = 
  <hex-color> |
  <color-function> |
  <named-color> |
  <color-mix()> |
  transparent

<system-color> = 
  AccentColor |
  AccentColorText |
  ActiveText |
  ButtonBorder |
  ButtonFace |
  ButtonText |
  Canvas |
  CanvasText |
  Field |
  FieldText |
  GrayText |
  Highlight |
  HighlightText |
  LinkText |
  Mark |
  MarkText |
  SelectedItem |
  SelectedItemText |
  VisitedText

<light-dark()> = 
  light-dark( <color>, <color> )

<deprecated-system-color> = 
  ActiveBorder |
  ActiveCaption |
  AppWorkspace |
  Background |
  ButtonHighlight |
  ButtonShadow |
  CaptionText |
  InactiveBorder |
  InactiveCaption |
  InactiveCaptionText |
  InfoBackground |
  InfoText |
  Menu |
  MenuText |
  Scrollbar |
  ThreeDDarkShadow |
  ThreeDFace |
  ThreeDHighlight |
  ThreeDLightShadow |
  ThreeDShadow |
  Window |
  WindowFrame |
  WindowText

<color-function> = 
  <rgb()> |
  <rgba()> |
  <hsl()> |
  <hsla()> |
  <hwb()> |
  <lab()> |
  <lch()> |
  <oklab()> |
  <oklch()> |
  <color()>

<named-color> = 
  aliceblue |
  antiquewhite |
  aqua |
  aquamarine |
  azure |
  beige |
  bisque |
  black |
  blanchedalmond |
  blue |
  blueviolet |
  brown |
  burlywood |
  cadetblue |
  chartreuse |
  chocolate |
  coral |
  cornflowerblue |
  cornsilk |
  crimson |
  cyan |
  darkblue |
  darkcyan |
  darkgoldenrod |
  darkgray |
  darkgreen |
  darkgrey |
  darkkhaki |
  darkmagenta |
  darkolivegreen |
  darkorange |
  darkorchid |
  darkred |
  darksalmon |
  darkseagreen |
  darkslateblue |
  darkslategray |
  darkslategrey |
  darkturquoise |
  darkviolet |
  deeppink |
  deepskyblue |
  dimgray |
  dimgrey |
  dodgerblue |
  firebrick |
  floralwhite |
  forestgreen |
  fuchsia |
  gainsboro |
  ghostwhite |
  gold |
  goldenrod |
  gray |
  green |
  greenyellow |
  grey |
  honeydew |
  hotpink |
  indianred |
  indigo |
  ivory |
  khaki |
  lavender |
  lavenderblush |
  lawngreen |
  lemonchiffon |
  lightblue |
  lightcoral |
  lightcyan |
  lightgoldenrodyellow |
  lightgray |
  lightgreen |
  lightgrey |
  lightpink |
  lightsalmon |
  lightseagreen |
  lightskyblue |
  lightslategray |
  lightslategrey |
  lightsteelblue |
  lightyellow |
  lime |
  limegreen |
  linen |
  magenta |
  maroon |
  mediumaquamarine |
  mediumblue |
  mediumorchid |
  mediumpurple |
  mediumseagreen |
  mediumslateblue |
  mediumspringgreen |
  mediumturquoise |
  mediumvioletred |
  midnightblue |
  mintcream |
  mistyrose |
  moccasin |
  navajowhite |
  navy |
  oldlace |
  olive |
  olivedrab |
  orange |
  orangered |
  orchid |
  palegoldenrod |
  palegreen |
  paleturquoise |
  palevioletred |
  papayawhip |
  peachpuff |
  peru |
  pink |
  plum |
  powderblue |
  purple |
  rebeccapurple |
  red |
  rosybrown |
  royalblue |
  saddlebrown |
  salmon |
  sandybrown |
  seagreen |
  seashell |
  sienna |
  silver |
  skyblue |
  slateblue |
  slategray |
  slategrey |
  snow |
  springgreen |
  steelblue |
  tan |
  teal |
  thistle |
  tomato |
  turquoise |
  violet |
  wheat |
  white |
  whitesmoke |
  yellow |
  yellowgreen

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})

<rgb()> = 
  rgb( <percentage>#{3} , <alpha-value>? ) |
  rgb( <number>#{3} , <alpha-value>? ) |
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<rgba()> = 
  rgba( <percentage>#{3} , <alpha-value>? ) |
  rgba( <number>#{3} , <alpha-value>? ) |
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> = 
  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hsla()> = 
  hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | 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] ]? )

<oklab()> = 
  oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<oklch()> = 
  oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<alpha-value> = 
  <number> |
  <percentage>

<hue> = 
  <number> |
  <angle>

<colorspace-params> = 
  [<custom-params> | <predefined-rgb-params> | <xyz-params>]

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020 |
  lab |
  oklab |
  xyz |
  xyz-d50 |
  xyz-d65

<polar-color-space> = 
  hsl |
  hwb |
  lch |
  oklch

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

<custom-color-space> = 
  <dashed-ident>

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}

<predefined-rgb> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020

<xyz> = 
  xyz |
  xyz-d50 |
  xyz-d65

Доступность

Браузеры не предоставляют вспомогательным технологиям специальную информацию о фоновых изображениях. Это особенно важно для программ чтения с экрана: они не объявляют о наличии таких изображений и, следовательно, не сообщают о них пользователям. Если изображение содержит информацию, важную для понимания общей цели страницы, лучше описать её семантически в документе.

  • MDN: пояснения к руководству 1.1 WCAG
  • [Понимание критерия успеха 1.1.1 W3C: «Понимание WCAG 2.0»](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html)

Эта возможность помогает повысить доступность, предоставляя запасной цвет, если изображение не загружается. Хотя для этого можно и следует задавать background-color для каждого фонового изображения, CSS-функция image() позволяет указывать цвет фона только на случай, если изображение не загрузится. Это позволяет задать запасной цвет на случай, если не загрузится прозрачный файл PNG, GIF или WebP.

Примеры

Изображения, зависящие от направления текста

<ul>
  <li dir="ltr">Bullet is a right facing arrow on the left</li>
  <li dir="rtl">Bullet is the same arrow, flipped to point left.</li>
</ul>

ul {
  list-style-image: image(ltr "rightarrow.png");
}

В элементах списка с направлением слева направо — тех, у которых для самого элемента задано dir="ltr" или которые наследуют направление от родительского элемента либо используют значение по умолчанию для страницы, — изображение будет отображаться без изменений. У элементов списка, у которых для <li> задано dir="rtl" или которые наследуют направление справа налево от родительского элемента (например, в документах на арабском или иврите), маркер будет отображаться справа и будет отражён по горизонтали, как если бы было задано transform: scaleX(-1). Текст также будет отображаться слева направо.

Отображение части фонового изображения

<div class="box">Hover over me. What cursor do you see?</div>

.box:hover {
  cursor: image("sprite.png#xywh=32,64,16,16");
}

При наведении указателя на блок курсор изменится и будет отображать фрагмент спрайта размером 16 × 16 px, начинающийся в точке x=32, y=64.

Наложение цвета поверх фонового изображения

.quarter-logo {
  height: 200px;
  width: 200px;
  border: 1px solid;
}

.quarter-logo {
  background-image: image(rgb(0 0 0 / 25%)), url("firefox.png");
  background-size: 25%;
  background-repeat: no-repeat;
}

<div class="quarter-logo">
  If supported, a quarter of this div has a darkened logo
</div>

Пример выше накладывает полупрозрачную чёрную маску на фоновое изображение с логотипом Firefox. Если бы вместо этого мы использовали свойство background-color, цвет отображался бы позади изображения логотипа, а не поверх него. Кроме того, весь контейнер имел бы одинаковый цвет фона. Поскольку мы использовали image() вместе со свойством background-size (и запретили повторение изображения с помощью свойства background-repeat), цветовой образец покрывает только четверть контейнера.

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

Спецификация
Модуль CSS Images, уровень 4
# funcdef-image

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

В настоящее время ни один браузер не поддерживает эту возможность.

См. также

  • <image>
  • element()
  • <url>
  • clip-path
  • <gradient>
  • image-set()
  • cross-fade()
  • Модуль CSS Images

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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API