html div背景图片不显示答案

【问题标题】：html div background image not showing uphtml div背景图片不显示
【发布时间】：2014-02-11 21:20:22
【问题描述】：

我正在处理网页（当然我是新手），背景图片不会显示在 div 中。我尝试了背景图像和背景，它们都不起作用......这是代码

如果有人能帮忙就太好了！！

<!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>

【问题讨论】：

您能否仔细检查您的图像路径是否正确？
我有，我检查了超过三遍
@AbdulAhmad 你应该检查第四次，因为那是你的问题。
是的，它确实是，我只是用不同的链接运行你的脚本，图像显示得很好
好的，它出现了，谢谢大家

标签： html css background

【解决方案1】：

我建议将您的 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>

如果这不起作用，请尝试在浏览器的开发人员工具中检查响应代码并确保 URL 正确。

希望这会有所帮助！

【讨论】：

【解决方案2】：

关于路径

的快速复习

绝对路径

https://website.com/assets/image.jpg

//website.com/assets/image.jpg
使用 http 或 https 协议加载的图像

相对路径

（如果图像在同一服务器上，则供内部使用）

image.jpg
图像在与调用图像的文档相同的文件夹中！

./image.jpg
同上，图片与调用图片的文档在同一文件夹中！

/assets/image.jpg
类似于绝对路径，只是省略了协议和域名
从我的根文件夹/ 开始搜索我的图像，而不是进入assets/

assets/image.jpg
这次 assets 与文档在同一个位置，所以进入 assets 获取图片

../assets/image.jpg
从文档所在的位置转到一个文件夹返回../并进入assets

../../image.jpg
转到两个文件夹返回，这是我的图片！

../../assets/image.jpg
转到两个文件夹返回 ../../ 然后进入 assets

【讨论】：

【解决方案3】：

我遇到了同样的问题我更正了从与页面相同的文件夹开始的相对路径，它起作用了： url(./images/1.jpg) 而不是 url(/images/1.jpg) 我在某处读到最好总是这样做。让我知道它是否有效。

【讨论】：

【解决方案4】：

对我来说，这是因为我使用角度元素指令来设置背景，但我忘记将“显示”设置为“块”。啊!我一直在解决这个问题！如果它是一个属性指令，我可能不会遇到这个。

【讨论】：

【解决方案5】：

实际上，我也遇到了同样的问题。该问题的解决方案就在这里。你必须改变你的道路 background-image: url('/ximages/websiteheader1.png'); 到 background-image: url('ximages/websiteheader1.png');

其实就是把图片路径中的第一个/去掉。

【讨论】：