url CSS значення

Значення url() застосовуються для вказівки адреси файлу. Наприклад до нового шрифту або до зображення, що буде тлом сторінки. Наприклад: background-image: url(https://lorempixel.com/1920/1080/abstract/);

автор: NagarD

Порада: Адресу дозволено задавати в одинарних або подвійних лапках, або без них.
автор: NagarD

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
url	1.0	1.0	1.0	3.5	12.0	3.0

Підтримка: мобільні переглядачі
Переглядач
url	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

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

автор: NagarD

Демонстація роботи значення.

автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!