Свойство CSS list-style-image
Свойство list-style-image используется для замены маркера элемента списка изображением.
Если у изображения есть собственная ширина и высота, они будут использованы для размера маркера. Если изображение имеет собственное соотношение сторон и хотя бы одну собственную ширину или высоту, недостающий размер будет вычислен на основе предоставленного соотношения и размера.
Свойство list-style-image применяется к элементам списка и элементам с display, установленным в "list-item". По умолчанию это включает элементы <li>. Его также можно задать для родительских элементов: <ol> или <ul>.
INFO
Свойство list-style-type будет использовано, если изображение недоступно для отображения.
| Начальное значение | none |
|---|---|
| Применяется к | Элементам списка. |
| Наследуется | Да. |
| Анимация | Нет. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.listStyleImage = 'url("image.jpg")'; |
Синтаксис
Синтаксис свойства CSS list-style-image
list-style-image: none | <url> | image-set() | initial | inherit;Пример свойства list-style-image:
Пример свойства CSS list-style-image со значением none
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: none;
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Результат
Пример свойства list-style-image с указанием URL-адреса изображения:
Пример свойства CSS list-style-image
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: url("https://ru.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| none | Означает, что изображение отображаться не будет. Вместо него будет показан маркер списка, заданный с помощью list-style-type. Это значение по умолчанию для данного свойства. | Запустить » |
<url> | Используется для указания URL-адреса изображения, которое будет использоваться в качестве маркера элемента списка. | Запустить » |
| image-set() | Задает набор изображений, которые могут использоваться в зависимости от среды рендеринга (например, разрешения экрана). | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какова функция свойства 'list-style-image' в CSS?