html div背景图片不显示
Posted
技术标签:
【中文标题】html div背景图片不显示【英文标题】：html div background image not showing up 【发布时间】：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 你应该检查第四次，因为那是你的问题。 是的，它确实是，我只是用不同的链接运行你的脚本，图像显示得很好 好的，它出现了，谢谢大家 【参考方案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');
其实就是把图片路径中的第一个/去掉。
【讨论】：
以上是关于html div背景图片不显示的主要内容，如果未能解决你的问题，请参考以下文章
给一个div中加一个转动的gif背景图片怎么加，我加了却不显示
图片逐渐由看不见到模糊，最后清晰显示;鼠标点击图片后，图片依照1234顺序依次循环显示;鼠标移入图片区域，图片放大