Клавиша / esc

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()`

Как понять

Скопировано

У функции крайне широкое применение, практически все файлы в 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);
}