Question

我有以下HTML代码

HTML：

<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page-back">
<img id="bg" src="background.jpg" width="100%" height="100%" >
</div>
<center>
<div id="content" align="center"><br>
<a href="#">Souvenir</a><br><br>
<a href="#">Gallery</a><br><br>
<a href="#">Presentations</a><br><br>
<a href="#">Principal's Message</a><br><br>
<a href="#">About</a><br><br>
</div></center>
</body>
</html>

和 CSS：

@charset "utf-8";
html { 
    overflow-y:hidden;
}
body {
    overflow-y:auto;
}
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#page-back {
    position:absolute;
    z-index:-1;
}
#content {
    width: auto;
    height: 530px;
    margin-top: 200px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    overflow-y: auto;
    font-size: 30px;
    font-family: "Century Gothic";
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
}
#content a {
    text-decoration: none;
    color: #000000;
}

此代码在Chrome中运行良好，但在IE中的图像

<img id="bg" src="background.jpg" width="100%" height="100%" >

未显示。尝试过很多东西，但没有任何作用！

应该改变什么？

谢谢

Answer 1

尝试添加位置：相对;到#bg标签。我的猜测是因为你正在使用z-index，其他东西可能会在它上面，导致它不显示。如果不让我知道，我将帮助解决这个问题。

具有绝对位置的＃page-back也可能导致此问题。

Answer 2

您应该使用CSS属性background-image（例如在您的html上）为您的网站设置背景图片，我认为您不会遇到任何兼容性问题。

背景没有在IE中显示但在Chrome中运行良好

2 个答案: