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

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

Относительные URL разрешаются относительно URL таблицы стилей, а не URL веб-страницы. Однако, если url() используется внутри пользовательского свойства (например, --my-image: url(foo.jpg)), относительный URL разрешается не сразу. Он разрешается при вычислении пользовательского свойства посредством подстановки var() в стандартное свойство. На этом этапе базовым URL является таблица стилей, в которой указана ссылка var(), а не та, где было определено пользовательское свойство.

Функцию url() можно использовать в качестве значения для свойств background, background-image, border-image, border-image-source, content, cursor, filter, list-style, list-style-image, mask, mask-image, offset-path, clip-path, src в блоке @font-face и @counter-style/symbol

Синтаксис

/* Basic usage */
url("https://example.com/images/myImg.jpg");
url('https://example.com/images/myImg.jpg');
url(https://example.com/images/myImg.jpg);
url("data:image/jpeg;base64,iRxVB0…");
url(myImg.jpg);
url(#IDofSVGpath);

/* associated properties */
background-image: url("star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("my-icon.jpg");
cursor: url(my-cursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantastic-font.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");

/* Properties with fallbacks */
cursor: url(pointer.cur), pointer;

/* Associated short-hand properties */
background: url('star.gif') bottom right repeat-x blue;
border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;

/* As a parameter in another CSS function */
background-image: cross-fade(20% url(first.png), url(second.png));
mask-image: image(url(mask.png), skyblue, linear-gradient(black, transparent));

/* as part of a non-shorthand multiple value */
content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);

/* at-rules */
@document url("https://www.example.com/") { /* … */ }
@import url("https://www.example.com/style.css");
@namespace url(http://www.w3.org/1999/xhtml);

Значения

<string>

Строка, задающая URL — относительный или абсолютный адрес либо указатель на подключаемый веб-ресурс, — или URL данных. Также можно использовать URL с хешем, чтобы указать идентификатор фигуры SVG или фильтра SVG.

Кавычки обычно необязательны. Они требуются, если URL содержит круглые скобки, пробелы или кавычки (если только эти символы не экранированы), а также если адрес содержит управляющие символы с кодом выше 0x7e. Применяются обычные правила синтаксиса строк: двойные кавычки нельзя использовать внутри строк в двойных кавычках, а одинарные — внутри строк в одинарных кавычках, если только они не экранированы.

<url-modifier>

В будущем функция url() может поддерживать указание модификатора — идентификатора или функциональной нотации, изменяющего значение строки URL. Эта возможность не поддерживается и не полностью определена в спецификации.

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

Примеры

В качестве значения свойства background

body {
  background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")
    #0000dd no-repeat fixed;
}

Для установки изображения в качестве маркера списка

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

ul {
  font-size: 3rem;
  margin: 0;
}

ul {
  list-style: outside
    url("https://mdn.github.io/shared-assets/images/examples/firefox-logo.svg");
}

Использование в свойстве content

HTML

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

CSS

li::after {
  content: " - "
    url("https://mdn.github.io/shared-assets/images/examples/star-white_16x16.png");
}

Результат

Использование URL данных

CSS

body {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
}

Использование в фильтрах

Если URL используется в качестве пути к фильтру, он должен быть одним из следующих:

1. Путь к файлу SVG с добавленным идентификатором фильтра.
2. Идентификатор фильтра, если SVG уже присутствует на странице.

.blur {
  filter: url("my-file.svg#svg-blur"); /* the URL of an SVG file used as a filter */
}

.inline-blur {
  filter: url("#svg-blur"); /* the ID of an SVG that is embedded in the HTML page */
}

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

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

См. также

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