CSS 背景图片 URL 路径答案

【问题标题】：CSS background image URL pathCSS 背景图片 URL 路径
【发布时间】：2014-03-31 07:23:51
【问题描述】：

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

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

图片文件网址为：/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>

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

【问题讨论】：

前导正斜杠是问题。
你试过不带斜线吗？ background-image:url('images/login/login_background.jpg');
如果您在浏览器开发者工具中查看网络检查器，您将能够看到浏览器尝试读取的完整路径，以供将来参考。

标签： html css image background

【解决方案1】：

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

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

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

【讨论】：

您应该解释一下为什么这是问题所在。正斜杠告诉浏览器查找与当前目录处于同一级别的目录。删除正斜杠告诉浏览器在当前目录中查找文件的目录。
@KyleShevlin 当然，我正在编辑帖子:) 无论如何谢谢。
@dasdasd 别提了:)

【解决方案2】：

试试这个：

#login-bg   
{

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

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

【讨论】：

技术上正确的语法应该是前导点斜杠`'./images/login/login_background.jpg'`
@Misunderstood 表示当前目录的点是 Unix 的东西。我什至不确定这是 URI 规范的一部分。
我的立场是正确的，它确实是 URI 规范的一部分。但是，它在技术上等同于没有前导斜线，因此从技术上讲它不再“正确”，事实上它在网络上是如此晦涩，我建议避免使用它。
@devios1 我不记得发表过该评论或为什么。可能是因为我遇到了不使用./ 不起作用的情况。如果您按照“网络上”的内容进行操作，那将是一个坏主意。是盲人把盲人领到外面去。从技术上讲，我相信它“更正确”。但事情发生了变化，我从 70 年代开始就一直在做这些事情。例如，我为他们的 PC 设计了 IBM 的第一块以太网卡。我总是使用完整的 URL http://www.example.com/images/example.jpg。浏览器需要使用完整的 url，并且通过缩写它可以给浏览器一些额外的工作。

【解决方案3】：

随便写

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

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

【讨论】：