如何在一個css中包含3個背景圖片？

Question

這裏有一段我​​的導航代碼：

<? if($page == ""){ ?> 
    <li> 
     <a href="<? echo $site;?>" id="on" style="background-image:url(images/logonav_onright.png) right no-repeat;">Home</a> 
    </li> 
<? }else{ ?> 
    <li> 
     <a href="<? echo $site;?>">Home</a> 
    </li> 
<? } ?> 

我想這#on包括3個圖像基本上是：

1. 隨着repeat-x。 （其實是#on）
2. 導航按鈕的左側。
3. 導航按鈕的右側。

我嘗試了一些我在網上找到的解決方案，但似乎沒有任何工作。 有沒有辦法做到這一點，而不包裹每個導航與2個額外的div標籤？

謝謝！

Answer 1

沒有不涉及添加更多元素的解決方案。不幸的是，每個元素只能通過CSS應用一個背景圖片。

Answer 2

我想你想要的是CSS Sliding Doors。

Answer 3

你會做它像這樣：

background-image: url(sheep.png), url(betweengrassandsky.png); 
background-position: center bottom, left top; 
background-repeat: no-repeat; 

有對here一些更多的信息，但作爲一個擡頭，這只是一個CSS3屬性。