url()

Функция url() для вставки файлов в документ по ссылке в CSS.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

CSS-функция url() вставляет файл с указанной ссылки.

Пример

Скопировано

url() может добавить элементу изображение на фон:

        
          
          div {  background-image: url("carpet.png");}
          div {
  background-image: url("carpet.png");
}

        
        
          
        
      

Импортировать шрифт:

        
          
          @font-face {  font-family: "Roboto Mono";  src: url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");}
          @font-face {
  font-family: "Roboto Mono";
  src: url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
}

        
        
          
        
      

Или стиль:

        
          
          @import url(style.css);
          @import url(style.css);

        
        
          
        
      

Быть параметром другой функции:

        
          
          div {  mask-image: image(url("mask.png"), red, radial-gradient(rgba(0, 0, 0, 1.0), transparent));}
          div {
  mask-image: image(url("mask.png"), red, radial-gradient(rgba(0, 0, 0, 1.0), transparent));
}

        
        
          
        
      
Список свойств, где используется `url()`
  • background;
  • background-image;
  • border;
  • border-image;
  • border-image-source;
  • content;
  • cursor;
  • filter;
  • list-style;
  • list-style-image;
  • mask;
  • mask-image;
  • offset-path;
  • src как часть @font-face;
  • @counter-style;

Как понять

Скопировано

У функции крайне широкое применение, практически все файлы в CSS вставляются через неё.

Как пишется

Скопировано

На вход функция принимает строку — ссылку на файл. Она может быть абсолютной, относительной или являться data URI.

Если в тексте самой ссылки нет кавычек, скобок и пробелов, то можно не заключать ссылку в кавычки.

Например, все эти записи корректны:

        
          
          div {  background-image: url("image.png");}
          div {
  background-image: url("image.png");
}

        
        
          
        
      
        
          
          div {  background-image: url('image.png');}
          div {
  background-image: url('image.png');
}

        
        
          
        
      
        
          
          div {  background-image: url(image.png);}
          div {
  background-image: url(image.png);
}

        
        
          
        
      

Но всё же рекомендуем их ставить для единообразия стиля кода.