如何在<li>链接中定位CSS背景图像？

Question

我正在使用左浮动无序列表为网站创建导航,并且正在寻找一种在当前活动页面链接下方定位图像的方法.我认为这可以通过CSS background-image属性以某种方式完成.

谢谢你的帮助!

Answer 1

可能最好的方法是在活动链接上设置class等于active.这可以使用服务器端代码进行硬编码或动态添加.

HTML:

<ul id="nav">
   <li>Link</li>
   <li class="active">Link</li>
   <li>Link</li>
   <li>Link</li>
</ul>

CSS:

#nav .active {
   background-image:url('YourImage.png');
   background-position:50% 50%; /*Adjust as needed. Also accepts pixel values.*/
}

Background-position加上戈德温的建议.有关其使用的详细信息,请参阅此链接.