Question

您好我试图使用CSS为我的页面使用背景。图像来自另一个文件夹，我尝试将她引用到CSS文件。

CSS文件URL为：/ var / www / soFit / BO

图像文件URL为：/ var / www / soFit / BO / images / login

我的CSS文件：

#login-bg   
{

    background-image:url('/images/login/login_background.jpg');
    font-size: 20px;
}

我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body id="login-bg"> 

<form action="" method="POST">

Username:  <input type="text" name="username" > 
<br>
Password:  <input type="text" name="password" > 
<br>
<input type="submit" value="enter"> 

</form>

</body>
</html>

为什么我无法看到我的背景图片？

Answer 1

从图像URL中删除前导正斜杠，如下所示：

#login-bg {
    background-image:url('images/login/login_background.jpg');
    font-size: 20px;
}

通过使用前导正斜杠，浏览器会尝试从域的Web根目录（例如/var/www/）而不是当前（CSS）文件位置加载图像。

Answer 2

试试这个：

#login-bg   
{

    background-image:url('images/login/login_background.jpg');
    font-size: 20px;
}

在路线的开头使用斜杠“/”使其成为绝对路线，而不是相对路线，这就是您想要的。

Answer 3

写一下

background-image:url('images/login/login_background.jpg');

当你写/图像时，它意味着图像文件夹来自网站的根目录。在这种情况下是不正确的。

CSS背景图片URL路径

3 个答案: