将背景图像添加到<ol> numbers </ol>

Question

我无法找到使用CSS完成以下任务的优雅方法：

我需要有序列表的编号才能看到蓝绿色的背景。我有这个图像（包括白色笔画）：

但我无法弄清楚如何使用CSS将它放在每个数字后面。感谢。

Answer 1

我可能会这样做：

ol {
    list-style-position: inside;
    color: white;
}
ol li {

    background-image: url('nswCH.png');
    background-position: -5px;
    background-repeat: no-repeat;
    padding-left: 7px;
}

Answer 2

我更喜欢以下列方式

 /* reset the ol counter with class liststyled*/
ol.liststyled {
counter-reset: item;
list-style-type: none;
list-style-position: inside;
padding-left: 0;
}
/* make the li relative */
ol.liststyled li{
position: relative;   
padding-left: 35px;
}
/*add absolute positioned img element background to our relative li */
ol.liststyled li:before{
font-size: .8em;
line-height: 25px;
vertical-align: middle;
width: 25px;
color: #fff;
text-align: center;
height: 25px;
content: counter(item) "  "; 
counter-increment: item ;
position: absolute;
left: 0;
background: url('../img/bulletolback.png') center no-repeat;
}

Answer 3

这对我来说似乎是最好的方式...... Customize Ordered Lists with the ::before Pseudo- Element

Answer 4

将list-style-image css规则与图片的网址一起使用。以下是the Mozilla documentation for CSS，

的示例

ul { 
    list-style-image: url("images/arrow.gif") 
}

您还可以查看他们的live demo。

哦等等，我才意识到这不会让你在图像中有数字......好吧，这至少可以让你部分地在那里......