背景图片不会显示
下面是我的侧边栏的HTML和CSS代码。背景图片不会显示
<div id="sidebar">
<header>
<h3 class="site-title">The Code Stitchery</h3>
</header>
<nav>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
CSS
nav a {
background: url(/Images/tape_measure_unit.png) no-repeat;
display: block;
padding: 2px 4px;
text-align: center;
width: 256px;
height: 36px;
}
的背景图像显示在Eclipse的网页编辑器就好了,但是当我走在Web浏览器中打开同一个页面,只有文字显示。 我从一些其他职位试过的建议,其中包括:
- Background Image won't show up in CSS unless I load an image using the <img> tag in HTML
- Background images not appearing
- Background image wont show up
但我仍然难住了。
这是侧边栏看起来像Eclipse的网页编辑器是什么:
这就是它看起来像在Mozilla Firefox:
用于获取图像的正确显示任何提示吗?
当您从浏览器访问您的home.html
文件时,您在映像的网址(/Images/tape_measure_unit.png
)中使用绝对路径,该路径对驱动器号变为绝对:file:///C:/Images/tape_measure_unit.png
。我认为你的形象不在那里,是吗?
制作相对于CSS文件位置(或HTML文件,如果没有)的路径。例如:
background: url(../Images/tape_measure_unit.png) no-repeat;
/**NOTE THE PERIOD BEFORE THE SLASH.**/
请注意,将所有这些部署到Web服务器后,绝对路径可能有意义。例如,如果您的Web服务器具有与本地codestitchery
文件夹相对应的根路径,则图像路径将起作用。
谢谢。关于文件路径的提示工作。 “图片”文件夹与网页位于同一级别,因此添加“..”已起作用。 – MissPiplup 2012-03-15 04:00:17
您的代码似乎工作对我说:
您确保浏览器不缓存旧的版本,如果你的CSS的内容?在测试/调试这类事情时,这是一个常见问题。如果你碰巧在IE中进行测试(即使Chrome和Firefox在重新使用缓存样式表而不是下载更新版本方面都非常积极),那么双打也是如此。
如果不是这样,那么这可能是您的图片网址的问题。您是否尝试过直接在http://<your server>/Images/tape_measure_unit.png
处指向浏览器并确保图像回来?
如果您将“图片”全部设为小写,会发生什么情况? – Scott 2012-03-15 01:42:59
最有可能不会工作 – MissPiplup 2012-03-15 08:16:12