你的css：background：url(img/head_banner.png) repeat其实当前的路径还没跳出css的层级关系。
如果这样写：background：url(../img/head_banner.png) repeat加入../ 是先跳出当前所属文件夹，然后再去找img文件夹里的东西！
如果你的css文件所处的位置，是和img文件夹同级，那么你的写法就正确了~
这个最好用jquery写，示例：<style type="text/css">
li{list-style:none}
#demo{width:200pxheight:200pxoverflow:hidden}
#demo ul li{width:200pxheight:200px}
</style>
<div id="demo">
<ul>
<li><img src="1.jpg" alt="1.jpg"/></li>
<li style="display:none"><img src="2.jpg" alt="2.jpg"/></li>
</ul>
</div>
<script src="此处引入jquery" type="text/javascript"></script>
<script type="text/javascript">
$(document).on("click","#demo ul li",function(){
$(this).css({"display":"none"})
$(this).siblings().css({"display":"block"})
})
</script>
1)背景图片插入:background-image:url(位置及名称) //默认在父级元素内的左上角2)背景平铺方式:background-repeat:no-repeat //不平铺 3)背景位置:background-position:right bottom //横向在右边，纵向在下边，即右下角center center //位于中心center right //中间靠右100px 200px //靠左100 靠上2004)背景尺寸:background-size:cover/contain/100% 100% 等比例缩放(铺满即可)/包含在里面/按盒子大小缩放注意:低版本的IE不支持背景尺寸5)背景显示方式:background-attachment:scroll//随屏幕滚动 fixed//固定在可视区域，注意:此时的位置是相对于可视区域的 (fixed:这里有一个兼容性性的问题，在IE6中，只有html和body支持这个属性)6)在图片设置边距时注意IE6的双倍间距问题:同时有浮动和边距时产生双倍间距!解决方法: display:inline//变为行内元素即可
