url()

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2016 года.

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

Примечание: Существует разница между URI и URL. URI идентифицирует ресурс. URL — это тип URI, описывающий местоположение ресурса. URI может быть либо URL, либо именем (URN) ресурса.

В CSS уровня 1 url() функциональная запись описывала только истинные URL-адреса. В CSS уровня 2 определение url() было расширено для описания любого URI, будь то URL или URN. Это запутанно означало, что url() может использоваться для создания <uri> типа данных CSS. Это изменение было не только неуклюжим, но, вероятно, и необоснованным, поскольку URN практически никогда не используются в реальном CSS. Чтобы устранить путаницу, CSS уровня 3 вернулся к более узкому, исходному определению. Теперь url() обозначает только истинные <url>.

/* Simple 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/jpg;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(rgb(0 0 0 / 100%), 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);

Относительные URL-адреса, если они используются, относительны к URL-адресу таблицы стилей (а не к URL-адресу веб-страницы).

Функция url() может быть включена в качестве значения для background, background-image, border, 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

Синтаксис

Значения

<string>

Строка, которая может указывать URL или идентификатор SVG-фигуры.

url

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

<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)

Если вы предпочитаете писать URL без кавычек, используйте обратную косую черту (\) перед скобками, пробелами, одинарными кавычками (') и двойными кавычками ("), которые являются частью URL.

path

Ссылка на идентификатор SVG-фигуры или SVG-фильтра.

<url-modifier>

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

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

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

Примеры

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

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

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

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 используется в качестве пути для фильтра, URL должен быть одним из следующих:

Путь к SVG-файлу с добавленным идентификатором фильтра.
Идентификатор фильтра, если 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 */
}

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

Спецификация
Модуль CSS Values and Units Level 4 # urls

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`url_function`	1	12	1	3.5	1	18	4	14	1	1.0	4.4

См. также

© 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/url_function