我的div+css的背景图片怎么无法显示呀？高手请帮我分析一下代码：

Question

css:
.titler1{width:100px;float:left;}
.titler1 ul{padding:0px;margin:0px;list-style-type:none;}
.titler1 ul li{line-height:25px;border:1px solid #dedede;cursor:pointer;}
.titler1 ul li.on {width:99px; height:31px;padding-left:4px;text-align: center; background:url(images/on1.gif) no-repeat;border-right:0; }
.titler1 ul li.off {width:99px;height:31px;padding-left:4px;text-align: center; background-image:url(images/off1.gif) no-repeat;}

html:
<div class="right_list">
<div class="titler1">
<ul>
<li id="li_qhuan_1" onmouseover="MyOnMouseOver(1, 5, 'li_qhuan_', 'ul_qhuan_', 'on', 'off')" class="on">美容</li>
<li id="li_qhuan_2" onmouseover="MyOnMouseOver(2, 5, 'li_qhuan_', 'ul_qhuan_', 'on', 'off')" class="off">健康</li>
<li id="li_qhuan_3" onmouseover="MyOnMouseOver(3, 5, 'li_qhuan_', 'ul_qhuan_', 'on', 'off')" class="off">情感</li>
<li id="li_qhuan_4" onmouseover="MyOnMouseOver(4, 5, 'li_qhuan_', 'ul_qhuan_', 'on', 'off')" class="off">亲子</li>
<li id="li_qhuan_5" onmouseover="MyOnMouseOver(5, 5, 'li_qhuan_', 'ul_qhuan_', 'on', 'off')" class="off">幽默</li>
</ul>
</div>
<div class="right_listnr " id="ul_qhuan_1">
{LB_内容_美容}
</div>
<div class="clear"></div>
<div class="hidden right_listnr" id="ul_qhuan_2">
{LB_内容_健康}
</div>
<div class="clear"></div>
<div class="hidden right_listnr" id="ul_qhuan_3">
{LB_内容_情感}
</div>
<div class="clear"></div>
<div class="hidden right_listnr" id="ul_qhuan_4">
{LB_内容_亲子}
</div>
<div class="clear"></div>
<div class="hidden right_listnr" id="ul_qhuan_5">
{LB_内容_幽默}
</div>
</div>

如果我把background:url(images/on1.gif),改为颜色的话，他就有显示。为什么。

Answer 1

.titler1 ul li.on {width:99px; height:31px;padding-left:4px;text-align: center; background:url(../images/on1.gif) no-repeat;border-right:0; }
.titler1 ul li.off {width:99px;height:31px;padding-left:4px;text-align: center; background-image:url(../images/off1.gif) no-repeat;}

图片路径要写相对路径

Answer 2

你这个问题不外乎两种情况：
1、图片路径不对（图片路径是相对CSS的）
2、样式被覆盖（看下是不是被其它CSS给覆盖掉了，注意权重问题）

Answer 3

你试试这样写background:url(images/on1.gif) no-repeat center;border-right:0;width:100%; height:1000px;}
总得写个宽高吧。

Answer 4

你再加个float:left;width:100%;height:auto;overflow:hidden;或float:left;width:100%;追问

还是没用的嘞···

我代码是不是写错了？

追答

分开写
background-image:url(images/on1.gif); background-repeat: no-repeat
还有你是不是图片路径有问题?改成../images/on1.gif试试