Question

由于某些奇怪的原因，背景图像未在IE中显示。我尝试使用图像的完整路径，使用背景而不是背景图像，使用png，gif，jpg，在图像路径周围使用引号和双引号。基本上尝试了关于IE中背景图像的网上建议的所有内容

html, body {
margin: 0;
padding: 0;
width: 1008px;
margin: 0 auto; 
font-family:"Trebuchet MS";
font-size:14px;
line-height: 190%;
text-align:left;
text-decoration: italic;
background-image: url(../images/bgr_top.jpg), url(../images/bgr_bottom.jpg);
background-repeat: repeat-x, repeat-x;
background-position:center top, center bottom;
}

我唯一怀疑的是我使用的是两张图片，一张用于顶部，另一张用于页面底部。同时阅读关闭括号后的空格，但不确定它是否相关，因为我在另一行使用background-repeat：

非常欢迎任何其他建议：）

Answer 1

background-image: url(../images/bgr_top.jpg), url(../images/bgr_bottom.jpg);

仅适用于支持css3＆amp;因此只有IE 9 +

支持所有浏览器的最佳方式是为每个背景使用单独的实体。

Answer 2

他们在不同的浏览器上工作吗？我首先检查网址是否正确并且图像是否存在，打开开发人员工具并查看浏览器是否下载它们，还需要只使用一个图像并查看是否可以看到，IE 9也不支持css 3它可能导致图像无法显示

Answer 3

只是想让你知道我是如何解决我的问题的。我添加了额外的div来保存整个网站，然后我将顶部图像添加到html，将底部图像添加到css中的正文。

html {
    background: url("../images/bgr_top.jpg");background-repeat: repeat-x; background-position:center top;
    height: 100%;
}

body{
background: url("../images/bgr_bottom.jpg"); background-repeat: repeat-x; background-position:center bottom;

    margin: 0;
    padding: 0;
    margin: 0 auto; 
    font-family:"Trebuchet MS";
    font-size:14px;
    line-height: 190%;
    text-align:left;
     text-decoration: italic;

}

.main {
    margin: 0;
    padding: 0;
    width: 1008px;
    margin: 0 auto; 
    font-family:"Trebuchet MS";
    font-size:14px;
    line-height: 190%;
    text-align:left;
     text-decoration: italic;

}

结果我现在在所有浏览器中都有两个背景，包括IE7,8等

希望这有助于某人。

在IE中的背景图像

3 个答案: