list-style-image

Интерактивный пример

CSS-свойство list-style-image устанавливает изображение, используемое в качестве маркера списка.

Чаще, удобнее использовать общее свойство list-style (en-US).

Примечание: Это свойство применяется к элементам списка, т.е. к элементам с display: list-item; по умолчанию оно включает элементы <li>. Т.к. это свойство наследуется, его можно задать для родительского элемента (обычно <ol> или <ul>), что позволит применить его ко всем элементам списка.

Синтаксис

/* Значение ключевым словом */
list-style-image: none;

/* <url> значения */
list-style-image: url('starsolid.gif');

/* Глобальные значения */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;

Значения

<url>
Расположение элемента для использования в качестве маркера.
none
Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определённый в list-style-type (en-US).

Формальный синтаксис

list-style-image = 
<image> | (en-US)
none

<image> =
<url> | (en-US)
<gradient>

<gradient> =
<linear-gradient()> | (en-US)
<repeating-linear-gradient()> (en-US) | (en-US)
<radial-gradient()> | (en-US)
<repeating-radial-gradient()> (en-US)

<linear-gradient()> =
linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )

<radial-gradient()> =
radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> ] (en-US)? (en-US) , <color-stop-list> )

<side-or-corner> =
[ (en-US) left | (en-US) right ] (en-US) || (en-US)
[ (en-US) top | (en-US) bottom ] (en-US)

<color-stop-list> =
<linear-color-stop> , [ (en-US) <linear-color-hint>? (en-US) , <linear-color-stop> ] (en-US)# (en-US)

<position> =
[ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US)
[ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)? (en-US) | (en-US)
[ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US)

<linear-color-stop> =
<color> && (en-US)
<length-percentage>? (en-US)

<linear-color-hint> =
<length-percentage>

<length-percentage> =
<length> | (en-US)
<percentage>

<color> =
<absolute-color-base> | (en-US)
currentcolor | (en-US)
<system-color> | (en-US)
<device-cmyk()>

<absolute-color-base> =
<hex-color> (en-US) | (en-US)
<named-color> | (en-US)
transparent | (en-US)
<rgb()> | (en-US)
<rgba()> | (en-US)
<hsl()> | (en-US)
<hsla()> | (en-US)
<hwb()> | (en-US)
<lab()> | (en-US)
<lch()> | (en-US)
<oklab()> | (en-US)
<oklch()> | (en-US)
<color()>

<device-cmyk()> =
device-cmyk( <cmyk-component>{4} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) )

<rgb()> =
rgb( [ (en-US) <percentage> | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) ) | (en-US)
rgb( [ (en-US) <number> | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<hsl()> =
hsl( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<hwb()> =
hwb( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<lab()> =
lab( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<lch()> =
lch( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<oklab()> =
oklab( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<oklch()> =
oklch( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<color()> =
color( <colorspace-params> [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )

<cmyk-component> =
<number> | (en-US)
<percentage>

<alpha-value> =
<number> | (en-US)
<percentage>

<hue> =
<number> | (en-US)
<angle> | (en-US)
none

<colorspace-params> =
<predefined-rgb-params> | (en-US)
<xyz-params>

<predefined-rgb-params> =
<predefined-rgb> [ (en-US) <number> | (en-US) <percentage> | (en-US) none ] (en-US){3} (en-US)

<xyz-params> =
<xyz-space> [ (en-US) <number> | (en-US) none ] (en-US){3} (en-US)

<predefined-rgb> =
srgb | (en-US)
srgb-linear | (en-US)
display-p3 | (en-US)
a98-rgb | (en-US)
prophoto-rgb | (en-US)
rec2020

<xyz-space> =
xyz | (en-US)
xyz-d50 | (en-US)
xyz-d65

Пример

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

CSS

ul {
  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
}

Результат

Спецификации

Specification
CSS Lists and Counters Module Level 3
# image-markers

Начальное значениеnone
Применяется ксписок элементов
Наследуетсяда
Обработка значения
Animation typediscrete

Поддержка браузерами

BCD tables only load in the browser

Смотрите также