关于div背景图像的基本CSS问题

Question

我是一个试图学习css的程序员，但我已经遇到了一个障碍。

我有以下HTML：

<div class="container">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-4">
        Left sidebar
    </div>
    <div class="span-16">
        <div class="span-8">
            Box1
        </div>
        <div class="span-4">
            Box2
        </div>
        <div class="span-4 last">
            Box3
        </div>
        <div class="span-16 last">
            Main content
        </div>
    </div>
    <div class="span-4 last">
        Right sidebar
    </div>
    <div class="span-24 last">
        Footer
    </div>
</div>

在我的css中，我有以下内容：

body {
    background-color:#FFFFFF;
}

div.container {
    background:url(/images/bck.jpg);
}

我只想为容器div的背景区域显示一个图像，但是什么也没有显示出来。如果我从css中删除了背景部分，并添加了background-color:#000000；，那么我会看到容器div的黑色背景。

我忽略了什么？

Answer 1

最有可能的情况是您没有指定正确的映像路径：

background:url(images/bck.jpg);

确保：

• 您指定的路径是正确的文件名图像的文件名是正确的
• 图像文件存在于images文件夹

中

注意：我今天回答了一个问题，请参阅 ../。

Answer 2

图像路径很可能是错误的。请记住，必须相对于CSS文件的位置指定图像。假设您的CSS文件中有一个名为styles的文件夹，您的图像中也有一个名为images的文件夹。然后，您可能需要指定：

 ../images/bck.jpg

才能访问该图像。

Answer 3

我发现使用Firebug for Firefox、Web Inspector for Safari或开发人员工具for MSIE 8可以帮助我诊断这样的问题。检查您的div.container元素并查看为您的图像显示的路径。

当然，如果您可以访问您的服务器日志，您还可以检查这些日志，以找出所请求的映像。

我最近遇到了一个类似的问题，一个jpeg图像拒绝显示，但只在MSIE中显示。我不得不在photoshop中打开图像，再次使用“保存为Web格式”，然后重新上传它。我不确定glich是什么，也许它被保存在不兼容的jpeg变体中，或者在某种程度上被损坏了，但这对我来说是有效的。