Chrome，Firefox中未显示背景图片

Question

我正在尝试使用Dreamweaver将背景图像加载到页面上。 它显示在IE和Edge中，但不显示在Chrome或Mozilla中。 我试过移动照片的位置（文件路径），并在纯HTML和CSS中尝试了相同的结果。 我找不到另一种方法来编写代码或想到一种代码（对此非常陌生），以使其在所有浏览器中都能显示。 这是CSS代码：

background-image: url('file:///D:/website.com/httpdocs/pic/greenleaf.jpg')

设置在车身支架中；

和html：

<body background="file:///D:/website.com/httpdocs/pic/Demo Page Song Thumbnails/Jpeg Thumbnails/greenleaf.jpg">

我到处都可以找到带有省略号的示例，例如url（... website.com/greanleaf.jpg），这些点使我完全困惑。 我认为也许我需要有关文件路径工作方式的帮助。

Answer 1

这是由于在Firefox和Chrome浏览器中实现了body和html标签。 body和HTML标签仅与它们的HTML内容一样大。 其中，与Edge和IE一样，HTML和Body的大小会自动调整为视口的大小。

将此添加到您的CSS

body, html{
    min-height:100%;
    min-width:100%;
}

Answer 2

好的，所以如果您的代码正确，并且图像显示在IE和Edge中，请尝试

刷新您的浏览器，但通常不使用以下命令： Control + Shift + R

这样您就可以确保运行该网站的最新版本

网站的服务。

Answer 3

首先，您需要确保浏览器正确定位了图像。

确定浏览器的网络标签的一种好方法。 在Chrome中按F12键显示开发人员工具。 单击网络选项卡，然后刷新浏览器。 您将收到已加载/尚未加载的资源列表。 如果图像以红色列出，则无法加载。 您的问题将是错误的路径。

这是了解相对文件路径的好资源。 https://css-tricks.com/quick-reminder-about-file-paths/

但是，如果确实加载成功，则图像由于其他原因而不会显示。 没有看到您所有的代码，我只能猜测。 您的图片所在的容器是否为空？ 没有内容或没有指定高度，背景图像将不会在某些浏览器中显示。

Chrome，Firefox中未显示背景图片

问题描述

3 个解决方案

解决方案1
1 2017-02-27 22:40:50

解决方案2
0 2017-02-28 00:59:09

解决方案3
-1 2017-02-27 22:42:44

Chrome，Firefox中未显示背景图片

问题描述

3 个解决方案

解决方案1 1 2017-02-27 22:40:50

解决方案2 0 2017-02-28 00:59:09

解决方案3 -1 2017-02-27 22:42:44

解决方案1
1 2017-02-27 22:40:50

解决方案2
0 2017-02-28 00:59:09

解决方案3
-1 2017-02-27 22:42:44