这个CSS有什么问题？

Question

我有以下CSS代码：

.yellow {
    background-image: url('/images/yellowlight.png');
    background-repeat: no-repeat;
    height:100%;
    width:100%;
}

以及以下HTML代码：

<div class="yellow">&nbsp;</div>

但是，页面上的div没有图像。您可以通过单击http://cl58logs.co.cc/处的蓝色“日志状态”按钮（位于选项卡框中）来查看此内容。

CSS有什么问题？

Answer 1

您的div不够大。背景图像不会缩放。如果您希望图像缩放，则必须使用img标记。

另请注意，height: 100%在CSS中不起作用，除了表格单元格。

Answer 2

问题是带有背景图像的div几乎没有内容（除了空格字符）。

如果强制div具有更大的高度，例如，将CSS更改为：

.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
min-height:600px;
width:100%;
}

然后出现您的图片

Answer 3

图像的高度（437像素）和宽度（700像素）大于div的尺寸。为div设置合适的高度和宽度，以便显示图像。

安装Firebug以便在遇到类似问题时更好地检查HTML元素。

Answer 4

由于您将高度和宽度设置为100％，因此您看到的图像数量将取决于包含黄色类的div。尝试更改状态类的宽度和高度，您实际上会看到黄色的bg图像。