CSS url() — посилання на зовнішній ресурс
Опис
Функція url() в CSS використовується для створення посилань на зовнішні ресурси, такі як зображення, шрифти, аудіо- та відеофайли, або інші сторонні файли, які можуть бути використані в CSS. Ця функція дозволяє вам вказати адресу ресурсу та використовувати його в відповідних CSS властивостях.
Наприклад, щоб встановити фонове зображення для елементу, можна використовувати властивість background-image разом із функцією url():
.element {
background-image: url("image.jpg");
}
Також функція url() дозволяє підключати зовнішні шрифти, як показано у наступному прикладі:
@font-face {
font-family: "CustomFont";
src: url("font.woff2") format("woff2"),
url("font.woff") format("woff");
}
Цей код використовує функцію url() для вказання шляху до зовнішнього шрифту та його формату. Це дозволяє використовувати власний шрифт на веб-сторінці.
Загальний опис
автор: NagarD
- Порада
-
Використовуйте відносні або абсолютні URL-адреси, залежно від контексту використання функції
автор: Bondurl(). - Порада
-
Використання функції
автор: Bondurl()забезпечує можливість легко включати зовнішні ресурси у ваші стилі та веб-дизайн, роблячи їх більш динамічними та привабливими.
Синтаксис
url(<url>);Функція url може отримувати єдине значення:
-
<url> -
Адреса ресурсу, яку ви хочете використати. Можна використовувати різні типи URL-адрес, такі як відносні або абсолютні URL-адреси до зображень, шрифтів, аудіо- та відеофайлів, сторонніх CSS-файлів тощо.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Ліворуч — картинка, вбудована прямо в стилі через url("data:image/svg+xml,…"), із # у кольорах, закодованим як %23. Праворуч — типова помилка: відносний шлях, який рахується від CSS-файлу й нікуди не веде, тому видно лише запасний колір фону.
HTML
<div id="description">
<h2>url(): data-URI проти зламаного відносного шляху</h2>
<p>Обидва блоки мають однакові розміри й однаковий запасний колір фону.</p>
</div>
<div id="result">
<figure>
<div class="box works"></div>
<figcaption>url("data:image/svg+xml,…") — працює</figcaption>
</figure>
<figure>
<div class="box broken"></div>
<figcaption>url("images/bg.png") — файла за цим шляхом немає</figcaption>
</figure>
</div>CSS
#result {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
figure {
margin: 0;
width: 220px;
text-align: center;
font: 12px/1.4 sans-serif;
}
figcaption {
margin-top: 8px;
}
.box {
width: 220px;
height: 120px;
border: 1px solid #adb5bd;
border-radius: 8px;
background-color: #ffe3e3;
background-size: cover;
}
/* Символ # у кольорах закодовано як %23 — інакше рядок обірветься на фрагменті */
.works {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Crect width='220' height='120' fill='%231864ab'/%3E%3Ccircle cx='70' cy='60' r='34' fill='%23fab005'/%3E%3Ccircle cx='150' cy='60' r='34' fill='%2340c057'/%3E%3C/svg%3E");
}
/* Шлях рахується від файла стилів, а не від сторінки — тут він веде в нікуди */
.broken {
background-image: url("images/bg.png");
}url() вказує на ресурс: тут — вшите data-URI-зображення, але так само працюють відносні шляхи і повні адреси. Лапки довкола адреси необов'язкові, та з ними безпечніше.
HTML
<div class="bg">Тло цього блока завантажено через url().</div>CSS
.bg {
height: 140px;
padding: 10px;
color: #fff;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Crect width='60' height='40' fill='%2387ceeb'/%3E%3Ccircle cx='45' cy='12' r='7' fill='gold'/%3E%3Cpath d='M0 40L20 18l14 14 10-8 16 16z' fill='%232e7d32'/%3E%3C/svg%3E") no-repeat;
background-size: cover;
}HTML
<div id="description">
<h2>Приклад 1: Динамічна зміна елемента за допомогою функції url()</h2>
<p>Наведіть курсор на зображення, щоб змінити його</p>
</div>
<div id="result">
<div class="image"></div>
</div>CSS
.image {
width: 300px;
height: 300px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-size: cover;
transition: background-image 0.3s ease;
}
.image:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23e9c46a'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23e76f51'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23264653'/%3E%3C/svg%3E");
}HTML
<div id="description">
<h2>Приклад 2: Встановлення фонового зображення елемента за допомогою функції url()</h2>
</div>
<div id="result">
<div class="box"></div>
<div class="box with-url"></div>
</div>CSS
#result {
display: flex;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
background-color: red;
margin-right: 20px;
}
.with-url {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-size: cover;
}HTML
<body>
<div>url CSS значення</div>CSS
body {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E") no-repeat ;
font-size: 30px;
}
div {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E") no-repeat 100px;
padding-left: 190px;
min-height: 128px;
}Коментарі
Коментарів ще немає — будьте першим!