-1

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

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

4

1 回答 1

0

首先，将您的后备放在级联中。例子：

身体 {
  背景：网址（http://placekitten.com/500/500）顶部中心#cdcdcd no-repeat；
  背景：-moz-线性渐变（顶部，#f5f7f9 0%，#cdcdcd 100%）；/* FF3.6+ */
  背景：-webkit-渐变（线性，左上，左下，颜色停止（0％，#f5f7f9），颜色停止（100％，#cdcdcd））；/* Chrome,Safari4+ */
  背景：-webkit-linear-gradient（顶部，#f5f7f9 0%，#cdcdcd 100%）；/* Chrome10+,Safari5.1+ */
  背景：-o-线性渐变（顶部，#f5f7f9 0%，#cdcdcd 100%）；/* 歌剧 11.10+ */
  背景：-ms-线性渐变（顶部，#f5f7f9 0%，#cdcdcd 100%）；/* IE10+ */
  背景：线性渐变（到底部，#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 不会用过滤器替换背景图像。我更喜欢使用有条件的评论来做到这一点：

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

请注意，条件注释是 HTML。

最后，大多数网站可能不需要-moz,-webkit或-o前缀；他们每个人都支持该标准linear-gradient有一段时间了。

于 2013-10-01T17:51:36.260 回答