CSS 背景图片仅适用于 Chrome，其他浏览器无效

debugcn 发表于 Dev

KFOz

我正在构建一个新网站，并且我一直在多个浏览器中测试我当前的代码，在这些浏览器中我发现了我通过 Chrome 中的 css 工作放置在标题标签中的背景图像，但没有其他浏览器。我希望图像可以在所有浏览器中使用。

我已经阅读了一些涵盖该主题的主题，但没有一个解决方案有效。

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 浏览器正确显示横幅和徽标，当浏览器大小更改时，图像会更改大小以匹配浏览器大小或指定的 CSS 大小。我可以将鼠标悬停在徽标上并看到箭头发生变化，并且可以在所有浏览器中进行选择。

雷切尔

看看你的css文件。你的路径是 CSS/styles.css，它是一个相对文件路径。

对于您的图像，您使用的是 /Images/image.jpg，它是一个绝对文件路径。

如果您在托管帐户上在线使用 /Images，它将转到您想要的任何根目录。如果您在本地设备上使用 /Images ......它会尽可能回到根目录。

所以如果我的计算机结构是：

我的电脑 -desktop --my-project ---index.html ---Images ----image.jpg ---CSS ----styles.css

/Images 会一直返回到我的电脑文件夹并在那里寻找它。虽然它不会在那里找到它。

您想要做的是 ../Images 将 css 文件夹外移回一级并查找图像文件夹。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。