Question

以下是否正确，因为IE不支持“liner-gradient”？

    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及以下

Answer 1

首先，将您的后备第一个放在级联中。例如：

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及以下版本中不起作用的原因。

您可以使用IE9到6的过滤器。示例：

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。

IE css背景问题

1 个答案: