html div背景图像未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21272395/
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
html div background image not showing up
提问by duxfox--
I'm working on a webpage (I'm a newb of course) and the background image won't show up in the div. I tried both background-image and background and they both will not work... heres the code
我正在处理一个网页（我当然是新手）并且背景图像不会显示在 div 中。我尝试了背景图像和背景，但它们都不起作用......这是代码
if anyone can help that would be great!!
如果有人可以提供帮助，那就太好了！！
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:gray;}
</style>
</head>
<body>
<div style="background-image: url('/ximages/websiteheader1.png');height:200px;width:1200px;">
</div>
</body>
</html>
回答by dev7
I recommend moving your css from the inline scope. Assuming that your .png file actually exists, try setting the background size and repeat tags.
我建议将您的 css 从内联作用域中移出。假设您的 .png 文件确实存在，请尝试设置背景大小和重复标签。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:gray;}
#mydiv {
background-image: url('/ximages/websiteheader1.png');
background-repeat:no-repeat;
background-size:contain;
height:200px;width:1200px;
}
</style>
</head>
<body>
<div id="mydiv">
</div>
</body>
</html>
If that doesn't work, try checking in your browser's developer tools for the response codes and making sure that the url is correct.
如果这不起作用，请尝试在浏览器的开发人员工具中检查响应代码并确保 url 正确。
Hope this helps!
希望这可以帮助！
回答by Roko C. Buljan
A fast and small lesson about paths
关于路径的快速小课程
Absolute paths
绝对路径
http://website.com/assets/image.jpg
IF the image is not on your domain- go look there for image
http://website.com/assets/image.jpg
如果图像不在您的域中- 去那里寻找图像
//website.com/assets/image.jpg
image loaded using http or https protocols
//website.com/assets/image.jpg
使用 http 或 https 协议加载的图像
Relative paths
相对路径
(For internal useif the image is on the same server)
（供内部使用，如果图像在同一台服务器上）
image.jpg
imagein the same folder as the document calling the image!
image.jpg
图像与调用图像的文档位于同一文件夹中！
./image.jpg
Same as above, imagein the same folder as the document calling the image!
./image.jpg
同上， 图片和调用图片的文件在同一个文件夹！
/assets/image.jpg
Similar to Absolute Paths, just omitting the protocol and domain name
Go search my image starting from my root folder /, than into assets/
/assets/image.jpg
类似于绝对路径，只是省略了协议和域名
从我的根文件夹开始搜索我的图像/，而不是进入assets/
assets/image.jpg
this time assetsis in the same place as the document, so go into assetsfor the image
assets/image.jpg
这次资产与文档在同一位置，因此进入图像的资产
../assets/image.jpg
From where the document is, go onefolder back../and go into assets
../assets/image.jpg
从文档所在的位置，返回一个文件夹并进入../assets
../../image.jpg
go twofolders back, there's my image!
../../image.jpg
去2个夹背，还有我的形象！
../../assets/image.jpg
go twofolders back../../and than go intoassets
../../assets/image.jpg
去2个夹背../../，比进入assets
回答by freddy
I had the same problem I corrected the relative path to start from the same folder as the page and it worked: url(./images/1.jpg) instead of url(/images/1.jpg) I read somewhere that it's better to do so always. let me know if it works.
我遇到了同样的问题，我更正了从与页面相同的文件夹开始的相对路径，它起作用了： url(./images/1.jpg) 而不是 url(/images/1.jpg) 我在某处读到它更好总是这样做。让我知道它是否有效。
回答by Helzgate
For me it was because i was using an angular element directive to set the background but i forgot to set "display" to "block". Ugh! I spent forever troubleshooting this! Had it been an attribute directive i likely would not have encountered this.
对我来说，这是因为我正在使用角度元素指令来设置背景，但我忘记将“显示”设置为“块”。啊! 我花了很多时间来解决这个问题！如果它是一个属性指令，我可能不会遇到这个。
回答by Neeraj saini
actually, the same problem has gone with me.
the solution is here for that problem.
you have to change your path
background-image: url('/ximages/websiteheader1.png');
TO
background-image: url('ximages/websiteheader1.png');
实际上，我也遇到了同样的问题。解决方案就在这里。你必须改变你的道路
background-image: url('/ximages/websiteheader1.png')；TO
background-image: url('ximages/websiteheader1.png');
actually, remove the first /from the path of the image.
实际上，/从图像的路径中删除第一个。
