Html CSS 背景图片 URL 路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22075730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background image URL path
提问by dasdasd
Hello Im trying to use background for my page using CSS. The image is from another folder and I try to reference her to CSS file.
您好，我正在尝试使用 CSS 为我的页面使用背景。该图像来自另一个文件夹，我尝试将她引用到 CSS 文件。
The CSS file URL is: /var/www/soFit/BO
CSS 文件 URL 是：/var/www/soFit/BO
The image file URL is: /var/www/soFit/BO/images/login
图像文件 URL 为：/var/www/soFit/BO/images/login
My CSS file:
我的 CSS 文件：
#login-bg
{
background-image:url('/images/login/login_background.jpg');
font-size: 20px;
}
My HTML code:
我的 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>
Why I cant see my background image?
为什么我看不到我的背景图片？
回答by Mimi
Remove the leading forward-slash from the image URL, as follows:
从图像 URL 中删除前导正斜杠，如下所示：
#login-bg {
background-image:url('images/login/login_background.jpg');
font-size: 20px;
}
By using the leading forward-slash, browser tries to load the image from the web root directory of the domain (e.g /var/www/) instead of the current (CSS) file location.
通过使用前导正斜杠，浏览器会尝试从域的 Web 根目录（例如/var/www/）而不是当前 (CSS) 文件位置加载图像。
回答by Hoijof
Try this:
尝试这个：
#login-bg
{
background-image:url('images/login/login_background.jpg');
font-size: 20px;
}
Using the slash '/' at the beginning of the route makes it an absolute route, not a relative route, which is what you want.
在路线的开头使用斜线“/”使其成为绝对路线，而不是您想要的相对路线。
回答by Alex
just write
写就好了
background-image:url('images/login/login_background.jpg');
when you write /images it means images folder is coming from the root directory of the website. which in this case is not correct.
当你写 /images 时，它意味着图像文件夹来自网站的根目录。在这种情况下这是不正确的。
