Список стилей с изображениями

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/