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)

如果您打开＆＃34;网络＆＃34;在Firefox或Chrome开发者工具中，您可以看到网络请求列表，其中包括（可能）404图像的GET请求。您可以检查那里的路径并相应地进行调整。

CSS / HTML - 背景图片不起作用

1 个答案: