画像を使ったスタイリングリスト

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/