url()

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);
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать