为什么这个 BG 图像不显示？答案

【问题标题】：Why won't this BG image display?为什么这个 BG 图像不显示？
【发布时间】：2011-01-22 10:42:52
【问题描述】：

这是我的 HTML：

                <div id="leftMenuWrapper">
                    <div id="ramps" class="leftMenuHeaderButton"></div>
                    <div id="carServiceRamps" class="leftMenuSubButton"></div> <div class="clear"></div>
                    <div id="67RaceRampsXT" class="leftMenuProductButton"></div>
                </div>

这是我的 CSS：

#leftMenuWrapper{
background:url(../images/main_elements/leftMenu_BG.jpg) repeat-y;
border:#777777 thin solid;
width:160px;
margin-left:-19px;
position:absolute;
padding-bottom:5px;
}

.leftMenuHeaderButton{
width:175px;
height:35px;
position:relative;
top:-16px;
left:-11px;
}
    #ramps{
    background:url(../images/main_elements/leftMenu/Ramps.png) no-repeat;
    }


.leftMenuSubButton{
width:169px;
height:21px;
position:relative;
float:right;
left:1px;
}
    #carServiceRamps{
    background:url(../images/main_elements/leftMenu/car-service-ramps.png) no-repeat;
    }

.leftMenuProductButton{
width:160px;
height:20px;
clear:both
}

    #67RaceRampsXT{
    background:url(../images/main_elements/leftMenu/67-Race-Ramp-XTs.jpg) no-repeat;
    width:160px;
    height:20px;
    }

.clear{clear:both}

一切正常，除了<div id="67RaceRampsXT" class="leftMenuProductButton"></div> 不会显示它的背景图像（它甚至不会显示背景颜色）。元素在那里，因为如果我调整大小，它会相应调整，但不会在 FF 或 Chrome 中显示图像。

我可以在里面放一个<IMG>没有问题，我什至可以给.leftMenuProductButton分配一个BG，但不能给#67RaceRampsXT

【问题讨论】：

标签： html css

【解决方案1】：

我认为ids 不能以数字开头。尝试将您的 id 更改为 RaceRamps67XT 并以这种方式对其进行测试 - 在 HTML 和 CSS 中，看看它的作用。

【讨论】：

【解决方案2】：

很确定只有类标识符可以以数字开头。对于您想要的 ID [A-Za-z_]。尝试将您的 ID 更改为 #sixtySevenRaceRampsXT。有关更多信息，请查看有关有效 ID 的问题：

What are valid values for the id attribute in HTML?

【讨论】：