Question

以下是我的侧边栏的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

有关正确显示图像的提示吗？

Answer 1

您在图像的网址（/Images/tape_measure_unit.png）中使用绝对路径，当您从浏览器访问home.html文件时，该路径将成为驱动器号的绝对路径：{{1} }。我不认为你的形象存在于那里，是吗？

制作相对于CSS文件位置的图像路径（如果没有，则为HTML文件）。例如：

file:///C:/Images/tape_measure_unit.png

请注意，一旦将所有这些部署到Web服务器，绝对路径可能有意义。例如，如果您的Web服务器具有与您的本地background: url(../Images/tape_measure_unit.png) no-repeat; /**NOTE THE PERIOD BEFORE THE SLASH.**/文件夹对应的根路径，那么您的图像路径将起作用。

Answer 2

您的代码似乎对我有用：

http://jsfiddle.net/GzzWU/

如果你的CSS内容，你确定浏览器没有缓存旧版本吗？在测试/调试此类事情时，这是一个常见问题。如果您碰巧在IE中进行测试（尽管Chrome和Firefox都非常积极地重用缓存样式表而不是下载更新版本），所以还是如此。

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

背景图片不会显示

2 个答案: