html - CSS/HTML - 背景图片不工作

Question

不知道为什么，但我的布局不显示登录按钮。

CSS:

.sign-in {
    position: absolute;
    left: 895px;
    top: 30px;
    width: 96px;
    height: 36px;
    background-image: url('button_sign-in.png');
}
.sign-in:hover {
    background-image: url('button_hover_sign-in.png');
}

HTML:

<a class="sign-in" href="#" title="Sign In"></a>

盒子在那里并且可以点击，只是里面没有图像。这些图像肯定存在并且与 html 文件位于同一文件夹中。

有什么想法吗？谢谢!

Answer 1

HTML 文件的位置无关紧要。

CSS 中的路径是相对于 CSS 文件的位置，而不是所显示的 HTML 文件。

例如，如果您的 CSS 文件位于包含 HTML 文件和图像的目录的子目录(例如 /css)中，您需要将路径从 url(your_image. png) 到 url(../your_image.png)。

如果您在 Firefox 或 Chrome 开发者工具中打开“网络”选项卡，您可以看到网络请求列表，其中将包括(大概)404 的图像 GET 请求。您可以在那里检查路径并相应地进行调整。