Html CSS 背景图像不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14029277/
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 Not Displaying
提问by darksky
I have an HTML file with a subdirectory called imgwith an image called debut_dark.png. In my CSS file, I have:
我有一个 HTML 文件，其中img包含一个名为debut_dark.png. 在我的 CSS 文件中，我有：
body {
background: url(/img/debut_dark.png) repeat 0 0;
}
The HTML file has the body tag and does include the CSS file appropriately. I know for sure the CSS file is included properly as everything else is formatted properly.
HTML 文件具有 body 标记，并适当地包含 CSS 文件。我确信 CSS 文件已正确包含，因为其他所有内容都已正确格式化。
The background image is not getting displayed, I am only seeing a white background. Any ideas how to fix this, or even how to debug it?
背景图像未显示，我只看到白色背景。任何想法如何解决这个问题，甚至如何调试它？
采纳答案by SaidbakR
According to your CSS file path, I will suppose it is at the same directory with your HTML page, you have to change the urlas follows:
根据你的CSS文件路径，我假设它和你的HTML页面在同一目录下，你必须改变url如下：
body { background: url(img/debut_dark.png) repeat 0 0; }
回答by Surinder ツ
You should use like this:
你应该这样使用：
body {
background: url("img/debut_dark.png") repeat 0 0;
}
body {
background: url("../img/debut_dark.png") repeat 0 0;
}
body {
background-image: url("../img/debut_dark.png") repeat 0 0;
}
or try Inspecting CSS Rules using Firefox Firebug tool.
或尝试使用 Firefox Firebug 工具检查 CSS 规则。
回答by daniel.caspers
I know this doesn't address the exact case of the OP, but for others coming from Google don't forget to try display: block;based on the element type. I had the image in an <i>, but it wasn't appearing...
我知道这并没有解决 OP 的确切情况，但是对于来自 Google 的其他人，不要忘记display: block;根据元素类型进行尝试。我有一个图像<i>，但它没有出现......
回答by David Hellsing
Make sure your body has a height, f.ex:
确保你的身体有一个高度，例如：
body {
background: url(/img/debut_dark.png) repeat;
min-height: 100%;
}
回答by Peter Focus
I have the same issue. But it works properly for me
我有同样的问题。但它适合我
background: url(../img/debut_dark.png) repeat
回答by Daiana
body {
background: url("../img/debut_dark.png") no-repeat center center fixed;
}
Worked for me.
为我工作。
回答by Jay
Its always good to have these additional properties besides the
除了
background-image:url('path') no-repeat 0 0;
背景图片：url('path') 不重复 0 0;
set dimension to the element
width:x; height:y;
background-size:100%
- This property helps to fit the image to the above dimension that you define for an element.
为元素设置维度
宽度：x；高度：y;
背景尺寸：100%
- 此属性有助于使图像适合您为元素定义的上述尺寸。
回答by ANIL PATEL
You have to use a relative path in the URL. I think you made two folders in the root directory where your index.html resides. One is 'CSS' folder & another is 'img' folder.
您必须在 URL 中使用相对路径。我认为您在 index.html 所在的根目录中创建了两个文件夹。一个是“CSS”文件夹，另一个是“img”文件夹。
Now, if you have to access 'img' folder in css files. So you have to go back once in root directory using "../" syntax. Then move to the 'img' folder using "../img" syntax. Then write the image name "../img/debut_dark.png".
现在，如果您必须访问 css 文件中的“img”文件夹。所以你必须使用“../”语法在根目录中返回一次。然后使用“../img”语法移动到“img”文件夹。然后写入图像名称“../img/debut_dark.png”。
回答by Eduard
I had the same issue. For me it worked with:
我遇到过同样的问题。对我来说，它适用于：
background: url("../img/green.jpg") no-repeat center bottom/cover;
height: 100vh;
回答by Aman Jha
If your path is correct then I think you don't have any element in you body section. Just define the height of the body and your code will work.
如果您的路径是正确的，那么我认为您的正文部分中没有任何元素。只需定义身体的高度，您的代码就会起作用。
