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 Variant）

如果你需要一些特效，你应该使用CSS3的多层背景。（效果我的意思是大小，位置或重复）

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

Answer 2

第一张图片是Top Layer（仅限CSS3

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

Answer 3

这将是一个CSS3功能。 http://www.css3.info/preview/multiple-backgrounds/

Answer 4

CSS3支持此功能，所有最新的浏览器都支持它。

请在这里查看：http://www.zenelements.com/blog/css3-background-images/

Answer 5

实际上，我推荐jim的解决方案，但如果您不想使用list-style-image（例如，如果您使用的是spritemap），这里是另一种解决方案。

如果您需要针对非CSS3兼容的浏览器进行优化，您可以在<span/>内放置<div/>或<li/>，并在每个浏览器上添加背景图片。

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

5 个答案: