IE无法显示html背景图像（颜色正常）_Html_Css

IE无法显示html背景图像（颜色正常）

html css

IE无法显示html背景图像（颜色正常）,html,css,Html,Css,所以Chrome和FF还可以，只是IE9无法显示html背景——它显示颜色，但没有图像。我怎样才能使它正常工作在以下设备上进行测试： html{ 宽度：100%；身高：100%；背景色：#ffeacd；背景图片：url（bg.png）；背景位置：0px 0px；背景重复：重复-x；边际：0px；填充：0px； } 身体{ 背景位置：中上；宽度：100%；身高：100%；边际：0px；填充：0px；背景图片：url（bg_overlay.png）；背景重复：无重复；

所以Chrome和FF还可以，只是IE9无法显示html背景——它显示颜色，但没有图像。我怎样才能使它正常工作

在以下设备上进行测试：


html{
宽度：100%；
身高：100%；
背景色：#ffeacd；
背景图片：url（bg.png）；
背景位置：0px 0px；
背景重复：重复-x；
边际：0px；
填充：0px；
}
身体{
背景位置：中上；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
背景图片：url（bg_overlay.png）；
背景重复：无重复；
}
.内容{
宽度：1020px；
身高：100%；
填充：0px；
边际上限：0px；
右边距：自动；
边缘底部：0px；
左边距：自动；
}

IE似乎不允许在html元素上使用背景图像标记。试试这样做

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
width:100%;
height:100%;
background-color: #ffeacd;
background-image: url(header-ad.png);
background-position: 0px 0px;
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
#wrapper {
background-position: center top;
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-image: url(hdr_GSA_lp.jpg);
background-repeat: no-repeat;
}
.content {
width:1020px;
height: 100%;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">

</div>
</div>
</body>


身体{
宽度：100%；
身高：100%；
背景色：#ffeacd；
背景图片：url（header-ad.png）；
背景位置：0px 0px；
背景重复：重复-x；
边际：0px；
填充：0px；
}
#包装纸{
背景位置：中上；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
背景图片：url（hdr_GSA_lp.jpg）；
背景重复：无重复；
}
.内容{
宽度：1020px；
身高：100%；
填充：0px；
边际上限：0px；
右边距：自动；
边缘底部：0px；
左边距：自动；
}

IE似乎不允许在html元素上使用背景图像标记。试试这样做

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
width:100%;
height:100%;
background-color: #ffeacd;
background-image: url(header-ad.png);
background-position: 0px 0px;
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
#wrapper {
background-position: center top;
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-image: url(hdr_GSA_lp.jpg);
background-repeat: no-repeat;
}
.content {
width:1020px;
height: 100%;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">

</div>
</div>
</body>


身体{
宽度：100%；
身高：100%；
背景色：#ffeacd；
背景图片：url（header-ad.png）；
背景位置：0px 0px；
背景重复：重复-x；
边际：0px；
填充：0px；
}
#包装纸{
背景位置：中上；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
背景图片：url（hdr_GSA_lp.jpg）；
背景重复：无重复；
}
.内容{
宽度：1020px；
身高：100%；
填充：0px；
边际上限：0px；
右边距：自动；
边缘底部：0px；
左边距：自动；
}

在IE9和IE8中测试-图像就在那里。然而，它是巨大的，你必须等待它被下载。你必须将它重新保存在一个优化版本中，以供Web使用在你的页面上做一些研究，似乎如果我禁用主体的背景图像，它将显示HTML的背景图像，这就是我目前收集到的…如果这有帮助的话，这个人在前面的问题中找到了一个解决方法，即更改doctype。我不能自己测试它，但你应该试试：在IE9和IE8中测试-图像就在那里。然而，它是巨大的，你必须等待它被下载。你必须将它重新保存在一个优化版本中，以供Web使用在你的页面上做一些研究，似乎如果我禁用主体的背景图像，它将显示HTML的背景图像，这就是我目前收集到的…如果这有帮助的话，这个人在前面的问题中找到了一个解决方法，即更改doctype。我不能自己测试，但你应该试试：