我正在构建一个新网站，我一直在多个浏览器中测试我当前的代码，在这些浏览器中我发现我通过 Chrome 中的 css 工作放置在 header 标记中的背景图像，但没有其他浏览器。我希望这些图像适用于所有浏览器。
我已经通读了几个涵盖该主题的主题，但没有一个解决方案有效。
HTML
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<title>Bazaar Ceramics - Home</title>
</head>
<header>
<a class="logo" href="/Home.html"><span>logo</span></a>
</header>
<!--navigation, body and footer below-->
CSS
body, html{
min-height:100%;
min-width:100%;
}
header{
background: url(/Images/banner.jpg) no-repeat center 0;
background-size: cover;
margin-bottom: 0px;
position: relative;
height: 296px;
}
header a.logo {
position: absolute;
display: block;
width: 200px;
height: 136px;
background: url(/Images/logo.png) no-repeat 0 0;
background-size: contain;
z-index: 1;
top: 160px;
left: 50px;
}
header a.logo span {
display: none;
}
@media screen and (max-width: 750px) {
header a.logo { width: 150px; height 100px; }
nav { padding: 0px 0px 0px 10px; }
}
Chrome 浏览器正确显示横幅和 Logo ，当浏览器大小更改时图像更改大小以匹配浏览器大小或指定的 CSS 大小。我可以将鼠标悬停在 Logo 上，然后看到箭头发生变化，它在所有浏览器中都是可选的。
最佳答案
查看您的 css 文件。您的路径是 CSS/styles.css，这是一个相对文件路径。
对于您的图像，您使用的是/Images/image.jpg，这是一个绝对文件路径。
如果您在在线托管帐户上使用/Images，它将转到您想要的任何根目录。如果您在本地设备上使用/Images...它会尽可能回到根目录。
所以如果我的计算机结构是:
我的电脑 -桌面 - 我的元素 ---index.html - -图片 ----图片.jpg ---CSS ----样式.css
/Images 一直回到我的电脑文件夹并在那里寻找它。它不会在那里找到它。
您要做的是 ../Images 将 css 文件夹外的内容移回一级并查找 images 文件夹。
关于html - CSS 背景图片仅适用于 Chrome，不适用于其他浏览器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56122158/