logo标签列表

HTML div背景图片无法显示

htmlcssbackground
17

我正在制作一个网页（当然我是新手），但是背景图片无法显示在div中。我已经尝试了background-image和background两种方式，但都不起作用......以下是代码：

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

<!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>
你能再确认一下你的图像路径是否正确吗？ - jmore009
我已经检查了三次以上。 - Abdul Ahmad
2
@AbdulAhmad 你应该再检查一遍，因为那是你的问题。 - Roko C. Buljan
这取决于HTML文件相对于图像的位置。 - domdomcodecode
1
好的，它正在显示出来，谢谢大家。 - Abdul Ahmad
显示剩余3条评论
6个回答
32

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

希望这可以帮到你！

21

关于路径的快速复习

绝对路径

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/image.jpg
从文件所在位置开始，向后移动一个文件夹../，进入assets

../../image.jpg
向后移动两个文件夹，这里有我的图像!

../../assets/image.jpg
向后移动两个文件夹../../，然后进入assets

1

对我来说，是因为我使用了一个angular元素指令来设置背景，但我忘记将"display"设置为"block"。唉！我花了很长时间来解决这个问题！如果它是一个属性指令，我可能不会遇到这个问题。

1

请检查以下内容：

无覆盖

确保没有其他类或样式覆盖您想要的内容。

图像路径

使用 Web 图片替换您的图片链接以检查问题是否在于路径。您可以尝试使用 Bootstrap home 图标。

background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor">
  <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 
  0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
  </svg>');

图标显示正确

您需要添加一些属性，例如

background-repeat:no-repeat;
background-size:contain;
padding: 1rem;
// ...
这很有帮助。谢谢。 - Dhruv Badaya
0

我曾经遇到过同样的问题，我将相对路径更正为与页面相同的文件夹开始，然后它就可以工作了： url(./images/1.jpg) 而不是 url(/images/1.jpg) 我在某个地方读到说这样做总是更好。 如果它有效，请告诉我。

0

实际上，我也遇到了同样的问题。 这个问题的解决方法在这里。 你需要更改你的路径 background-image: url('/ximages/websiteheader1.png'); TO background-image: url('ximages/websiteheader1.png');

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接