背景图像不出现 HTML CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18369629/
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
Background image not appearing HTML CSS
提问by
I am new to html/css and I do not understand why my background image is not showing up. This is part of a simple test CSSsheet and HTMLcode for a simple site. I am trying to add a background-imageand I have done this once and it worked and I do not know why it does not work now.
我是 html/css 新手，我不明白为什么我的背景图片没有显示出来。这是一个简单站点的简单测试CSS表和HTML代码的一部分。我正在尝试添加一个，background-image并且我已经完成了一次并且它起作用了，但我不知道为什么它现在不起作用。
body{
background: url (rio.jpg);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
This is part of my css sheet. THe url works, I have used it for another trial site before. And my html is just a regular html document with a body etc..
这是我的 css 表的一部分。该网址有效，我之前曾将其用于另一个试用网站。而我的 html 只是一个带有正文等的常规 html 文档。
采纳答案by StickMaNX
You can try doing the following:
您可以尝试执行以下操作：
background-image: url(http://www.example.com/images/bck.png); // absolute path
background-image: url(rio.jpg); // relative path
If you are stating that the path is just rio.jpg, the image should be in the same directory as the stylesheet/where you are declaring the background.
如果您声明路径只是 rio.jpg，则图像应与样式表/您声明背景的位置位于同一目录中。
If the image is in an image directory, you may need to go up a level as follows:
如果图像在图像目录中，您可能需要按如下方式上一级：
background-image: url(../images/rio.jpg);
Depends where the image file is located. You can refer to following for further information: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
取决于图像文件所在的位置。您可以参考以下了解更多信息：https: //developer.mozilla.org/en-US/docs/Web/CSS/background-image
Hope this helps!
希望这可以帮助！
回答by Eric Kidd
CSS is picky about functions.
CSS 对函数很挑剔。
You can't have a space after 'url' and the parenthesis.
'url' 和括号后不能有空格。
Correct:
background: url(path/to/image.jpg);
正确的：
background: url(path/to/image.jpg);
Incorrect:
background: url (path/to/image.jpg);
不正确：
background: url (path/to/image.jpg);
Here's a fiddle demonstrating: http://jsfiddle.net/tJmmn/
这是一个小提琴演示：http: //jsfiddle.net/tJmmn/
回答by Mirror318
Haha I had the same problem, make sure you have the right ".png" or ".jpg"!
哈哈 我遇到了同样的问题，请确保您拥有正确的“.png”或“.jpg”！
After all my searching, the problem was I had a file called "bg.png", but I was typing in "bg.jpg"
经过所有搜索，问题是我有一个名为“bg.png”的文件，但我输入的是“bg.jpg”
回答by Smartniggs
Had the same issue. I used "background" and instead of "background-image".
Secondly, make sure that the element that has the background e.g a div tag is not empty, else the background image won't show
有同样的问题。我使用了“背景”而不是“背景图像”。
其次，确保具有背景的元素（例如 div 标签）不为空，否则背景图片将不会显示
回答by Devashish Pawar
This problem occurs if you are trying to give the height of the background image in %. If you give that in px it should work and if you still want to give the height in % i.e. 100%(generally) than add this in css:
body{
margin: 0;padding: 0;positive: absolute;top: 0;bottom: 0;left: 0;right: 0;}
如果您尝试以 % 给出背景图像的高度，则会出现此问题。如果你在 px 中给出它应该可以工作，如果你仍然想以 % 即 100%（通常）给出高度而不是在 css 中添加它： body{
margin: 0;padding: 0;positive: absolute;top: 0;bottom: 0;left: 0;right: 0;}
This should work as well.
这也应该有效。
