html - CSS - 列表项的 2 个背景图像

Question

我正在使用图像作为列表项的底部边框。我也想在左侧为每个元素使用元素符号图像。那么如何为列表项使用 2 个背景图像呢？目前我有以下内容:

li{
    width:200px;
    padding:3px 5px;
    background: url(images/dot.png) repeat-x left bottom;
}

Answer 1

---

使用子弹图像:

---

li 
{
   list-style-image: url('bullet.png');
}

只需将它添加到您现有的样式中即可:

li
{
    width:200px;
    padding:3px 5px;
    background: url(bg.png) repeat-x left bottom;
    list-style-image: url('bullet.png');
}

---

ADDON(CSS3 变体)

---

如果您需要一些特殊效果，您应该使用 CSS3 的多层背景。 (对于效果，我指的是大小、位置或重复)

li{
    width:200px;
    padding:3px 5px;
    background: url(images/dot.png) no-repeat left bottom,
         url(images/image.png) repeat-x right top;
}