css 连接添加背景图片

以前一直模模糊糊不知道怎么搞  今天测试了一下........

页面：

<div class="can2">
    <ul>
        <li><a href="index.html"><span>Home</span></a></li>
        <li><a href="about-us.html"><span>About Us</span></a></li>
        <li><a href="#"><span>Forum</span></a></li>
        <li><a href="projects.html"><span>Portfolio</span></a></li>
        <li><a href="contact-us.html"><span>Contact</span></a></li>
    </ul>
</div>

 

css文件：

.can2 ul
{
   width:950px;  height:25px; float:left; list-style-type:none;
}
 
.can2 li
{
    width:80px; display:inline; float:left; 
 }
 
.can2 a
{
    text-decoration:none;
 color:#6d7586;
 display:block;
 cursor:pointer;
 padding-left:5px;
}

.can2 span
{
    padding-right:5px;  
}
 
.can2 a:hover
{
 color:#000;
 text-decoration:none;
 background:url(../images/li-left-bg.gif) left no-repeat; 
}

.can2 a:hover span
{
 color:#000;
 text-decoration:none;
 background:url(../images/li-right-bg.gif) right no-repeat; 
}

.can2 a:active
{
 color:#000;
 text-decoration:none;
 background:url(../images/li-left-bg.gif) left no-repeat; 
}

.can2 a:active span
{
 color:#000;
 text-decoration:none;
  background:url(../images/li-right-bg.gif) right no-repeat; 
}

 

因为背景有两张  所以只能通过写.can2 a:hover 和.can2 a:hover span 来分别设置a span 的背景  如果一张的话就不用这么麻烦了.......