0

您好我有以下问题：使用所有浏览器时，它显示背景正常。使用 IE6,7 或兼容性视图时没有显示背景图像。当删除所有“背景图像”并留下后备时，一切正常。请帮忙。
这是CSS：

html,body{
     background: #529BCE;
     background-image: url('Img/bg.png'); /* fallback */
     background-image: url('Img/bg.png'), -webkit-gradient(linear, left top, left bottom, from(#1D3A62), to(#57A3D5)); /* Saf4+, Chrome */
     background-image: url('Img/bg.png'), -webkit-linear-gradient(top, #1D3A62, #57A3D5); /* Chrome 10+, Saf5.1+ */
     background-image: url('Img/bg.png'), -moz-linear-gradient(top, #1D3A62, #57A3D5); /* FF3.6+ */
     background-image: url('Img/bg.png'), -ms-linear-gradient(top, #1D3A62, #57A3D5); /* IE10 */
     background-image: url('Img/bg.png'), -o-linear-gradient(top, #1D3A62, #57A3D5); /* Opera 11.10+ */
     background-image: url('Img/bg.png'), linear-gradient(top, #1D3A62, #57A3D5); /* W3C */
     background-repeat: no-repeat;
     color:#18364B;
     font-family: Arial,Verdana,Geneva,Helvetica,sans-serif;
     font-size:20px;
     line-height:1.2em;
     margin:0;padding:0;
     height: 100%;
     overflow: auto;
    }
4

4 回答 4

1

尝试重新声明 ie6 和 ie7 的背景图像。在您的文件后添加以下内容css：


<!--[if IE 6]><style>html,body{background:#529bce url("../Img/bg.png") 0 0 no-repeat}</style>
<![endif]-->
<!--[if IE 7]><style>html,body{background:#529bce url("../Img/bg.png") 0 0 no-repeat}</style>
<![endif]-->

这应该可以，但如果您在 IE6 中没有看到 png，那是因为不支持 png。如果您仍然遇到问题，请更改每个样式，以便您知道您的目标是什么，然后从那里开始。

于 2012-08-22T10:37:14.907 回答
0

这是编辑后的CSS。试试这个

 html,body
    {
       background-color: #57A3D5;
    background-color: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1D3A62), to(#57A3D5));
    background-color: -moz-linear-gradient(top, #1D3A62 0%, #57A3D5 100%);
    background-image: url('../Img/bg.png'); /* fallback */ 
    background-repeat: no-repeat;
    color:#18364B;
    font-family: Arial,Verdana,Geneva,Helvetica,sans-serif;
    font-size:20px;
    line-height:1.2em;
    margin:0;padding:0;
    height: 100%;
    overflow: auto;

    }
于 2012-08-22T10:25:25.717 回答
0

试试这个;

<!--[if IE 6]><style type="text/css">html,body{background-color: #529bce; background-image: url('../Img/bg.png'); background-repeat: no-repeat}</style>
<![endif]-->
<!--[if IE 7]><style type="text/css">html,body{background-color: #529bce; background-image: url('../Img/bg.png'); background-repeat: no-repeat}</style>
<![endif]-->
于 2012-08-22T10:47:12.347 回答
0

这是因为您使用的是多背景图像语法，这会混淆旧版本的 IE。所以代替这个

 background-image: url('Img/bg.png'); /* fallback */
 background-image: url('Img/bg.png'), -webkit-gradient(linear, left top, left bottom, from(#1D3A62), to(#57A3D5)); /* Saf4+, Chrome */
 /* etc */

您需要url()使用渐变从背景图像中删除该部分，如下所示：

 background-image: url('Img/bg.png'); /* fallback */
 background-image: -webkit-gradient(linear, left top, left bottom, from(#1D3A62), to(#57A3D5)); /* Saf4+, Chrome */
 background-image: -webkit-linear-gradient(top, #1D3A62, #57A3D5); /* Chrome 10+, Saf5.1+ */
 background-image:    -moz-linear-gradient(top, #1D3A62, #57A3D5); /* FF3.6+ */
 background-image:     -ms-linear-gradient(top, #1D3A62, #57A3D5); /* IE10 */
 background-image:      -o-linear-gradient(top, #1D3A62, #57A3D5); /* Opera 11.10+ */
 background-image:         linear-gradient(top, #1D3A62, #57A3D5); /* W3C */

如果您需要较新的浏览器具有渐变和 url('Img/bg.png')，则需要找到一种专门针对旧版本 IE 的方法。我赞成条件类方法。

于 2012-08-22T11:00:07.600 回答