出于某种原因(我似乎无法找到),我的.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;
}
答案 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)
您遇到某种链接问题:
<强> 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
。