背景图片不会显示

下面是我的侧边栏的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浏览器中打开同一个页面，只有文字显示。我从一些其他职位试过的建议，其中包括：

但我仍然难住了。

这是侧边栏看起来像Eclipse的网页编辑器是什么： A screenshot of the offending page

这就是它看起来像在Mozilla Firefox： enter image description here

用于获取图像的正确显示任何提示吗？

来源

2012-03-15 MissPiplup

如果您将“图片”全部设为小写，会发生什么情况？ – Scott 2012-03-15 01:42:59

最有可能不会工作 – MissPiplup 2012-03-15 08:16:12

当您从浏览器访问您的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文件夹相对应的根路径，则图像路径将起作用。

来源

2012-03-15 01:36:14 Diego

谢谢。关于文件路径的提示工作。 “图片”文件夹与网页位于同一级别，因此添加“..”已起作用。 – MissPiplup 2012-03-15 04:00:17

您的代码似乎工作对我说：

http://jsfiddle.net/GzzWU/

您确保浏览器不缓存旧的版本，如果你的CSS的内容？在测试/调试这类事情时，这是一个常见问题。如果你碰巧在IE中进行测试（即使Chrome和Firefox在重新使用缓存样式表而不是下载更新版本方面都非常积极），那么双打也是如此。

如果不是这样，那么这可能是您的图片网址的问题。您是否尝试过直接在http://<your server>/Images/tape_measure_unit.png处指向浏览器并确保图像回来？

来源

2012-03-15 01:31:47 aroth

背景图片不会显示

回答

相关问题