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文件夹

注意：我今天回答了一个问题，请参见 how to specify the path ../。

Answer 2

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

 ../images/bck.jpg

以访问该图片。

Answer 3

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

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

我最近遇到了一个像jpeg图像拒绝显示的问题，但仅限于MSIE。我不得不在photoshop中打开图像并再次使用“Save for Web”然后重新加载它。我不确定这是什么小事，也许它是以不相容的jpeg变体保存或以某种方式腐败，但这对我有用。

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

3 个答案: