这是我的一段导航代码:
<? 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张图像:
- With
repeat-x
。(实际上是#on
) - 导航按钮左侧。
- 导航按钮右侧。
我尝试了一些我在网上找到的解决方案,尽管没有一个似乎有效。有没有办法做到这一点,没有包装每个导航与2个额外的div
标签?
谢谢!
没有不添加更多元素的解决方案。遗憾的是,每个元素只能通过CSS应用一个背景图像。
您可以这样做:
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
这里有更多的信息,但是作为提示,它只是一个CSS3属性
我想你想要的是CSS滑动门。