Question

我正在建立一个新网站，并且我已经在多个浏览器中测试了我当前的代码，在这些浏览器中，我发现我通过css放置在header标记中的背景图片在Chrome中工作，但没有其他浏览器。我希望这些图片能在所有浏览器中正常工作。

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

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; }
}

当浏览器大小更改图像更改大小以匹配浏览器大小或指定的CSS大小时，Chrome浏览器会正确显示横幅和徽标。我可以将鼠标悬停在徽标上，然后看到箭头更改，并且在所有浏览器中都可以选择它。

Answer 1

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

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

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

如果我的计算机结构是：

我的电脑 -桌面 - 我的项目 --- index.html - -图片 ---- image.jpg -CSS ---- styles.css

/ Images一直返回到我的计算机文件夹，并在该文件夹中寻找。它不会在那里找到它。

您要执行的操作是../Images，将其移回css文件夹之外的一级并查找images文件夹。

CSS背景图片仅适用于Chrome浏览器，而不能用于其他浏览器

1 个答案: