背景图像<li>成为背景而不是列表项目符号

Question

所以我想要一张图片成为我的列表的一个项目。我想用一张背景图来变成一颗子弹。但是它变成了项目的背景。

ul {
list-style-type: none;
}
li {
background-image: url('https://via.placeholder.com/50')
}

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

必须用background-image而不能用list-style-image

我需要改变什么?

Answer 1

如果您想使用background-image属性，下面是一个工作示例:

ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
background-image: url(https://developer.mozilla.org/static/media/edge.40018f6a.svg);
background-repeat: no-repeat;
background-position: 0 .4em;
padding-left: 20px;
}

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

下面是一个使用list-style-image CSS属性的例子

ul {
list-style-type: none;
}
li {
list-style-image: url('https://via.placeholder.com/50')
}

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

Answer 2

您需要使用list-style-image使用图像代替常规子弹

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image

list-style-image CSS属性的作用是:设置一个用作列表项标记的图像。

ul {
list-style-type: none;
}
li {
list-style-image: url('https://via.placeholder.com/50')
}

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

如果这个想法是通过背景来伪造子弹，则需要background-size和background-position。下面是background

使用简写语法的示例

ul {
list-style-type: none;
padding:0;
}
li {
background: url('https://via.placeholder.com/50') 0 50% / 1em 1em no-repeat;
padding-left:1.5em;
}

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

Answer 3

更改ul的list-style-image

ul {
list-style-image: url('https://via.placeholder.com/50')
}

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>