IE css背景问题

-1

由于IE不支持“线性渐变”，以下是否正确？IE css背景问题

background: #f5f7f9; /* Old browsers */ 
    background: -moz-linear-gradient(top, #f5f7f9 0%, #cdcdcd 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f7f9), color-stop(100%,#cdcdcd)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f5f7f9 0%,#cdcdcd 100%); /* W3C */ 
    background:url(../img/backgrounds/form_bg.png) 0 0 no-repeat;

我基本上提供图像后备。

这不是在IE9工作，下面

来源

2013-10-01 Alex

不明白为什么不，你测试过吗？ – plvdmeer

您可能想要将最后一行（包含图像）添加到渐变上方[[像这样]]（http://jsbin.com/uyOhEWi/2/）。 –

这不适用于IE9及以下版本 – Alex

首先，把你的后备第一级联。例如：

 
body { 
    background: url(http://placekitten.com/500/500) top center #cdcdcd no-repeat; 
    background: -moz-linear-gradient(top, #f5f7f9 0%, #cdcdcd 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f7f9), color-stop(100%,#cdcdcd)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f5f7f9 0%,#cdcdcd 100%); /* W3C */ 
}

现代浏览器认为渐变是一种背景图像。在回退之后，可以理解回退的浏览器将使用它，并且可以理解其他规范的浏览器将使用渐变覆盖回退。例如，IE7只会了解背景图片，并忽略渐变。 Chrome会执行背景图片，然后用linear-gradient覆盖背景图片。

二，-ms-linear-gradient支持从IE10开始;它不被IE9支持，所以这就是为什么它不能在IE9及以下版本中使用。

您可以通过6例使用过滤器IE9的：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3838', endColorstr='#00ffffff',GradientType=0); /* IE6-9 */

如果您使用过滤器，您还需要禁用后备图片，因为IE 6 - 9不更换背景图片过滤器。我喜欢用conditional comments做到这一点：

<!--[if (gte IE 6)&(lte IE 9)]> 
<style type="text/css"> 
body { background-image: none; } 
</style> 
<![endif]-->

注意，有条件的评论是HTML。

最后，大多数网站可能不需要-moz，-webkit或-o前缀;他们每个人都有supported the standard linear-gradient for a while。

来源

2013-10-01 17:51:36 KatieK

IE css背景问题

回答

相关问题