带图像的样式列表

Question

我正在寻找样式列表的顶部和底部的图像的图像。我知道在css3中，有border-image属性，但是我需要一些适用于旧版浏览器的东西。

名单如下：

<ul> 
<li> a </li> 
<li> b </li> 
</ul> 

我需要所有的列表项之前出现的图像，而另一个的所有列表项之后到来。

我知道我可以做这样的事情：

<div id="top-image"></div> 
    <ul> 
    <li> a </li> 
    <li> b </li> 
    </ul> 
<div id="bottom-image"></div> 

是否有比这更好的选择？

Answer 1

您可能需要在UL background &顶部图像的第一个LI中定义底部图像。像这样：

ul{ 
background:url(bottom-image) no-repeat left bottom; 
} 

li{ 
background:url(bottom-image) no-repeat 0 0; 
} 
li + li{ 
background:none; 
} 

检查这个例子http://jsfiddle.net/CY5ck/