与 css 不同的文件夹中的 css 背景图像答案

【问题标题】：css background image in a different folder from css与 css 不同的文件夹中的 css 背景图像
【发布时间】：2012-02-05 16:04:00
【问题描述】：

我的css在assets/css/style.css，我的图片在assets/img/bg.png但是当我尝试链接背景图片时：

background: url(../img/bg.png);

它使用assets/css/../img/bg.png 作为网址。为什么会这样？

【问题讨论】：

它不应该...引用它 (background: url('../img/bg.png');) 能解决问题吗？
@minitech 它没有 :( 也尝试使用双引号
在chrome和opera上都试过了。
您确定它使用它作为 URL 吗？你检查的怎么样了？
我可能有点太彻底了，但你在检查like this吗？（如您所见，它对我有用...）

标签： html css

【解决方案1】：

您正在使用相对路径。你应该使用绝对路径，url(/assets/css/style.css)。

【讨论】：

相对路径有效，绝对路径并不总是最好的。也许我们可以专注于这个问题？

【解决方案2】：

您正在使用缓存系统..您可以修改原始文件并清除缓存以显示更新

【讨论】：

【解决方案3】：

HTML 文件 (/index.html)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
     <link rel="stylesheet" media="screen" href="assets/css/style.css" />
</head>
<body>
     <h1>Background Image</h1>
</body>
</html>

css文件（/assets/css/style.css）

body{
    background:url(../img/bg.jpg);  
}

【讨论】：

你能解释一下你为此做了什么吗？这是一个基本的 HTML/CSS 布局。为什么这会成为答案，因为您没有正式显示任何与实际提供的代码不同的代码。

【解决方案4】：

由于您提供了图像的相对路径，因此从您拥有 css 文件的位置查找图像位置。因此，如果您的图像与 css 文件位于不同的位置，您可以尝试提供绝对 URL（从根文件夹开始的路径）或提供相对文件位置路径。在您的情况下，由于 img 和 css 位于文件夹 assets 中以从 css 文件的位置移动到 img 文件，因此您可以使用“..”运算符来表示浏览器必须将 1 个文件夹移回，然后按照您拥有的路径在 '..' 运算符之后。这基本上是相对路径的工作原理，您可以使用它来访问不同文件夹中的资源。希望对您有所帮助。

【讨论】：

【解决方案5】：

你可以用这个

body{ background-image: url('../img/bg.png'); }

我在需要设置 div 的背景图像的项目中尝试了这个，所以我使用了这个并且它成功了！

【讨论】：

这里回答了为什么要在 URL 中使用引号 - stackoverflow.com/questions/2168855/…

【解决方案6】：

对于 mac OS，你应该使用这个：

body {
 background: url(../../img/bg.png);
}

【讨论】：

【解决方案7】：

我有一个类似的问题，但解决了改变斜线符号的方向：出于某种原因，当 Atom 从项目文件夹中复制路径时，它会像 background-image: url(img\image.jpg\) 而不是 (img/image.jpeg)

虽然我可以看到 OP 并非如此，但可能对其他人有用（我只是浪费了半个上午想知道为什么我的样式表没有加载）

【讨论】：

【解决方案8】：

身体

{

背景图片：url('../images/bg.jpeg');

}

【讨论】：