CSS背景图片网址路径 [英] CSS background image URL path
问题描述
您好，我想使用CSS为我的页面使用背景。
该图片来自另一个文件夹，我尝试将其引用到CSS文件。
CSS文件的URL是：/ var / www / soFit / / p>
图片文件网址是：/ var / www / soFit / BO / images / login
：
＃login-bg
{
background-image：url images / login / login_background.jpg'）;
font-size：20px;
}
我的HTML代码：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< link rel =stylesheettype =text / csshref =styles.css/>
< / head>
< body id =login-bg>
< form action =method =POST>
用户名：< input type =textname =username>
< br>
密码：< input type =textname =password>
< br>
< input type =submitvalue =enter>
< / form>
< / body>
< / html>
为什么我看不到我的背景图片？
从图像URL中删除前导正斜杠，如下所示：
＃login-bg {
background-image：url（'images / login / login_background.jpg'）;
font-size：20px;
}
通过使用前导正斜杠，浏览器尝试从网络根目录（例如 / var / www / ）而不是当前（CSS）文件位置。
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.
The CSS file URL is: /var/www/soFit/BO
The image file URL is: /var/www/soFit/BO/images/login
My CSS file:
#login-bg
{
background-image:url('/images/login/login_background.jpg');
font-size: 20px;
}
My HTML code:
<!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?
Remove the leading forward-slash from the image URL, as follows:
#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.
这篇关于CSS背景图片网址路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
