为什么我的.png文件没有显示出来

Question

出于某种原因（我似乎无法找到），我的.png图像没有显示出来。

我正在尝试通过我的CSS文件将其加载到网站上，而不是像例如。 <img src="images/Balloon_1.png">

<section id="container_1">
    <header id="header_container_1">
        <h1><a name="Over ons"></a>Over ons</h1>
   </header>
   <div id="Balloon_1"></div>

CSS：

#Balloon_1{
     background: url(images/Balloon1.png);
     display: block;
     height: 70px;
     width: 64px;
}   

Answer 1

在提供答案之前;一些忠告。好的编码标准指定如果Balloon1是页面的设计元素，则是，您应该通过CSS将其作为背景加载。如果它只是页面上的图像不会对网站布局产生影响，那么您应该继续将其作为img标记加载。

现在我将详细说明其他人给你的答案。

background: url(images/Balloon1.png);

是相对于此代码在文件中的位置的文件路径。因此，如果你在一个名为style的文件夹中有一个CSS文件，那么这就是在style / images / Baloon1.png中寻找Balloon1.png。

background: url(/images/Balloon1.png);

在此示例中，带有正斜杠“/”表示路径应该从站点的根目录开始。根目录是您的主文件夹，最小的分母。

background: url(../images/Balloon1.png);

在此示例中，两个句点用于指示在文件所在位置的父目录中启动的路径。因此，如果您在名为style的文件夹中有CSS文件，那么这将在whateverFolderStyleIsIn / images / Baloon1.png中查找Balloon1.png。您可以结合使用此技术来退出多个文件，以便使用../../ images/Balloon1.png等开始。

background: url(http://YourURL.com/images/Balloon1.png);

在此示例中，链接不再是相对的，而是直接的。它直接指向您的图像文件，但是使您的代码仅应用于该URL会产生令人遗憾的影响，您无法在不重写直接网址的情况下将此代码复制并粘贴到其他网站。

Answer 2

工作得很好......？

您遇到某种链接问题：

http://jsfiddle.net/SinisterSystems/SeC6W/

<强> HTML

    <section id="container_1">
    <header id="header_container_1">
            <h1><a name="Over ons"></a>Over ons</h1>
    </header>

    <div id="Balloon_1"></div>

<强> CSS：

#Balloon_1 {
    background:url(http://www.online-image-editor.com/styles/2013/images/example_image.png);
    width:100px;
    height:100px;
    display:block;
}

使用您当前的代码，请确保您的.png图片完全 。

Index.html file root -> Images Folder -> Balloon1.png

您的CSS文件正在链接到图片：

../../images/Balloon1.png

最后的答案。

您有一个assets文件夹，因此您必须drop back twice。只需执行../，您只需返回assets文件夹，而不是root。

Root是index.html所在的位置。

Root -> Assets -> CSS -> Style.css是style.css所在的位置。

Root -> Images -> Balloon1.png是image所在的位置。

因此，由于您的CSS文件在树中较深，因此您必须回溯两次才能返回Root。

Root -> Assets

Root

然后你可以进步到......

Root -> Images -> File。