Question

我正在网页上工作（当然我是新手），背景图片不会显示在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>

Answer 1

关于路径

的快速小课程

绝对路径

http://website.com/folder/image.jpg
如果图片不在您的域中 - 请查看图片

<小时/> //website.com/folder/image.jpg
使用http或https协议加载的图片

相对路径

（对于内部使用，如果图像在同一台服务器上）

/folder/image.jpg
与绝对路径类似，只是省略协议和域名
从根文件夹/ 开始搜索我的图片，而不是folder

image.jpg
图片 与调用图片的文档位于同一文件夹中！

folder/image.jpg
这次文件夹与文档位于同一位置，因此请进入子文件夹以获取图片

../folder/image.jpg
从文档的位置开始，一个文件夹返回 ../ 并进入 {{1} }

folder
去两个文件夹返回 ../../folder/image.jpg ，然后进入 ../../

folder
去两个文件夹返回 ，这是我的形象！

Answer 2

我建议您从内联示波器移动您的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>

如果不起作用，请尝试在浏览器的开发者工具中查看响应代码并确保网址正确无误。

希望这有帮助！

Answer 3

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

Answer 4

对我来说，这是因为我使用了角度元素指令来设置背景，但我忘了将“display”设置为“block”。啊!我花了很长时间来排除故障如果它是一个属性指令，我可能不会遇到这个。

Answer 5

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

实际上，从图像的路径中删除第一个/。

html div背景图像没有显示出来

5 个答案:

绝对路径

相对路径