Question

您好我有以下问题：使用所有浏览器时，它显示背景确定。当使用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;
    }

Answer 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。如果您仍然遇到问题，请更改每个样式，以便了解您的目标，并从那里开始。

Answer 2

这是编辑过的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;

    }

Answer 3

试试这个;

<!--[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]-->

Answer 4

这是因为您使用的是multiple background image syntax，这使旧版本的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。我赞成the conditional classes method。

使用ie 6,7和兼容性视图时，不会出现CSS HTML background-image

4 个答案: