Question

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

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

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

Answer 1

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);  
}

Answer 2

对于mac OS，你应该使用它：

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

Answer 3

你可以使用这个

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

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

Answer 4

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

虽然我可以看到OP并非对其他人有用（我只是浪费了一半的时间，想知道为什么我的样式表没有加载）

Answer 5

由于您要提供图像的相对路径，因此将从您拥有css文件的位置查找图像位置。因此，如果您将图像放在与css文件不同的位置，您可以尝试提供绝对URL（从根文件夹开始的路径）或给出相对文件位置路径。在你的情况下，因为img和css在文件夹资源中从css文件的位置移动到img文件，你可以使用＆＃39; ..＆＃39;操作员指的是浏览器必须将1个文件夹移回，然后按照＆＃39; ...＆＃39;之后的路径进行操作。运营商。这基本上是相对路径的工作方式，您可以使用它来访问不同文件夹中的资源。希望它有所帮助。

Answer 6

身体

{

background-image：url（'../ images / bg.jpeg'）;

}

Answer 7

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

Answer 8

您正在使用相对路径。您应该使用绝对路径url（/assets/css/style.css）。

css背景图像在css的另一个文件夹中

8 个答案:

你可以使用这个