Html 与 css 不同的文件夹中的 css 背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8783026/
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 in a different folder from css
提问by Jürgen Paul
my css is in assets/css/style.cssand my image is in assets/img/bg.pngBut when i try to link the background image:
我的 css 在里面assets/css/style.css，我的图片在里面assets/img/bg.png但是当我尝试链接背景图片时：
background: url(../img/bg.png);
it instead uses assets/css/../img/bg.pngas the url. Why is it?
它改为assets/css/../img/bg.png用作 url。为什么？
回答by Adriano Silva
Html file (/index.html)
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 file (/assets/css/style.css)
CSS 文件 (/assets/css/style.css)
body{
background:url(../img/bg.jpg);
}
回答by Wariored
For mac OS you should use this :
对于 mac OS，你应该使用这个：
body {
background: url(../../img/bg.png);
}
回答by Dise?o Franco
I had a similar problem but solved changing the direction of the slash sign:
For some reason when Atom copies Paths from the project folder it does so like background-image: url(img\image.jpg\)instead of (img/image.jpeg)
我有一个类似的问题，但解决了改变斜线符号的方向：出于某种原因，当 Atom 从项目文件夹复制路径时，它这样做background-image: url(img\image.jpg\)而不是(img/image.jpeg)
While i can see it's not the case for OP may be useful for other people (I just wasted half the morning wondering why my stylesheet wasn′t loading)
虽然我可以看到情况并非如此 OP 可能对其他人有用（我只是浪费了半个上午想知道为什么我的样式表没有加载）
回答by Tanay Toshniwal
you can use this
你可以用这个
body{
background-image: url('../img/bg.png');
}
body{
background-image: url('../img/bg.png');
}
I tried this on my project where I need to set the background image of a div so I used this and it worked!
我在我的项目中尝试了这个，我需要设置一个 div 的背景图像，所以我使用了它并且它起作用了！
回答by bhanushrestha
Since you are providing a relative pathway to the image, the image location is looked for from the location in which you have the css file. So if you have the image in a different location to the css file you could either try giving the absolute URL(pathway starting from the root folder) or give the relative file location path. In your case since img and css are in the folder assets to move from location of css file to the img file, you can use '..' operator to refer that the browser has to move 1 folder back and then follow the pathway you have after the '..' operator. This is basically how relative pathway works and you can use it to access resoures in different folders. Hope it helps.
由于您提供的是图像的相对路径，因此将从您拥有 css 文件的位置查找图像位置。因此，如果您将图像放在与 css 文件不同的位置，您可以尝试提供绝对 URL（从根文件夹开始的路径）或提供相对文件位置路径。在您的情况下，由于 img 和 css 位于文件夹资产中以从 css 文件的位置移动到 img 文件，您可以使用“..”运算符来表示浏览器必须向后移动 1 个文件夹，然后按照您拥有的路径进行操作在“..”运算符之后。这基本上是相对路径的工作方式，您可以使用它来访问不同文件夹中的资源。希望能帮助到你。
回答by Abudayah
You are using cache system.. you can modify the original file and clear cache to show updates
您正在使用缓存系统..您可以修改原始文件并清除缓存以显示更新
回答by Brownman98
You are using a relative path. You should use the absolute path, url(/assets/css/style.css).
您正在使用相对路径。您应该使用绝对路径 url(/assets/css/style.css)。
