如何在一个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

你会这样做：

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

有关here的更多信息，但作为单挑，它只是一个CSS3属性。

Answer 3

我认为你想要的是CSS Sliding Doors。