【发布时间】：2016-12-04 05:33:07
【问题描述】：
我正在尝试做一个简单的网站来进行培训，以便学习一些更高级的 CSS。但是，我遇到了一个问题，因为没有显示 url() 图像。
这是 HTML 代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" />
<head>
<title>Mark in Japan</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>
<div id="wrap">
<header>
<h1>Mark in Japan</h1>
</header>
<nav>
<ul>
<li> <a class="active" title="home" href="#">Home</a></li>
<li><a title="reisenotizen" href="#">Reisenotizen</a></li>
<li><a title="essen" href="#">Essen</a></li>
<li><a title="medien" href="#">Medien</a></li>
<li><a title="japan" href="#">Über Japan</a></li>
</ul>
</nav>
<section>
<article>
<h2>Blog-Überschrift</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
</section>
<aside>
<h3>Überschrift Seitenleiste</h3>
<ul>
<li>List Content</li>
<li>List Content</li>
<li>List Content</li>
</ul>
</aside>
<footer>
<p>Copyright ©2016 Mark in Japan, alle Rechte vorbehalten.</p>
</footer>
</div>
</body>
</html>
下面是 CSS：
body {
margin: 0;
padding: 0;
background: #026dc0 url('../bilder/bg.gif') repeat-x top;
font-family: Helvetica, sans-serif;
line-height: 1.4em;
}
h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}
p, h2, h3 {
margin: 0 0 10px 0;
}
ul {
list-style-type: none;
}
#wrap {
margin: 0 auto;
margin-top: 40px;
margin-bottom: 40px;
padding: 10px;
width: 780px;
background: #fff;
border: 10px solid #044375;
}
header {
background: url('../bilder/insel.jpg') no-repeat;
height: 250px;
}
header h1 {
padding: 30px 0 30px 30px;
color: #fff;
background: url('../bilder/dot.png') no-repeat 10px 50%;
font-weight: normal;
letter-spacing: -1px;
}
nav {
margin: 10px 0 0 0;
padding: 10px;
background: #044375;
border-top: 5px solid #033761;
}
nav ul li {
display: inline;
margin: 0 10px 0 10px;
}
nav a {
color: #fff;
}
section {
margin: 10px 0 0 0;
padding: 10px;
float: left;
width: 505px;
}
aside {
margin: 10px 0 0 0;
padding: 10px;
float: right;
width: 225px;
}
aside ul {
margin: 0 0 40px 0;
}
aside h3 {
padding: 5px;
background: #eee;
border-bottom: 2px solid #ddd;
font-weight: normal;
}
footer {
clear: both;
background: #eee;
border-bottom: 2px solid #ddd;
}
我已经按照给我的练习中提供的所有代码准确地完成了所有代码。我还通过 CSS 和 HTML 验证运行了代码。他们完全没有错误地通过，但图像没有显示出来。
我已将<header> 元素更改为<div> 元素，分配了一个ID，并尝试将图像从文件夹移动到页面根目录，看看是否有任何区别，但没有用。
如果您有任何建议、想法等，我将非常高兴。
提前致谢。
【问题讨论】：
-
url是相对于
CSS文件的，你确定CSS文件所在位置的父文件夹里面有bilder文件夹吗？ -
好吧，我的结构看起来就像我被告知的那样：有
mark，在mark内部是index.html、screen.css和bilder文件夹，以及图像.尽管如此，即使将其更改为url('image.gif);并将图像移动到根目录，也没有任何效果。图像不会显示。足够有趣：如果我将与<img src="">相同的路径添加到 html 文件中的链接，它就可以正常工作。 -
你给
height和width了吗？ -
@PraveenKumar 不，我没有。我的文件中没有概述。我确实再次将
更改为 并且我确实添加了 I 高度和宽度给它们，它丢失了。它确实出现了。由于我之前确实将更改为 没有成功，因此您的猜测可能是修复它的原因！无论哪种方式，它现在都在工作。非常感谢！