Question

当我按照类似问题的答案时，它不起作用

我的css文件......

.tail{
    height:300px;
    width:300px;
    background-image:url('C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png');
}

in html

<div class="tail">
</div>

图片路径：已选中在html中链接：已检查

Answer 1

您需要使用file:// URI Scheme。

.tail{
    height:300px;
    width:300px;
    background-image:url('file://c:/Users/joseph/Documents/GitHub/Spring2014/CMP342/MainProject/WebContent/WEB-INF/img/login.png');
}

如果您的网站不在本地计算机上，则可以将其上传到imgur.com等服务，并链接到托管图像。

Answer 2

您只需要从索引文件的路径开始找到图像路径。

假设您的index.html位于MainProject，那么您必须像这样使用它：

.tail{
    height:300px;
    width:300px;
    background-image:url('WebContent\WEB-INF\img\login.png');
}

Answer 3

这是不正确的路径不要在css属性中使用反斜杠作为路径。 CSS不允许使用反斜杠(\)

background-image:url('C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png');

试试这个

background-image:url('../img/login.png');

OR

background-image:url('C:/Users/joseph/Documents/GitHub/Spring2014/CMP342/MainProject/WebContent/WEB-INF/img/login.png');

Answer 4

尝试使用/代替\

.tail{
    height:300px;
    width:300px;
    background-image:url('file://C:/Users/joseph/Documents/GitHub/Spring2014/CMP342/MainProject/WebContent/WEB-INF/img/login.png');
}

但是，我建议您使用相对路径而不是绝对路径。例如，如果您的img文件夹与HTML文件位于同一目录中，则可以使用：

.tail{
    height:300px;
    width:300px;
    background-image:url('img/login.png');
}

CSS background-image不起作用

4 个答案: