html - 背景图片不会显示

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 的网页编辑器中显示得很好，但是当我在网络浏览器中打开同一页面时，只显示文本。 我尝试了其他一些帖子的建议，包括:

• > 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 中的样子:

有什么技巧可以让图片正常显示吗？

Answer 1

当您从浏览器访问您的 home.html 文件时，您在图像的 URL 中使用了绝对路径 (/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 文件夹，那么您的图像路径将起作用。