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

时间:2014-01-26 20:50:03

标签: css image

出于某种原因(我似乎无法找到),我的.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;
}   

enter image description here

2 个答案:

答案 0 :(得分:2)

在提供答案之前;一些忠告。好的编码标准指定如果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会产生令人遗憾的影响,您无法在不重写直接网址的情况下将此代码复制并粘贴到其他网站。

答案 1 :(得分:1)

工作得很好......?

您遇到某种链接问题:

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

Rootindex.html所在的位置。

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

Root -> Images -> Balloon1.pngimage所在的位置。

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

Root -> Assets

Root

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

Root -> Images -> File