IE css背景问题[关闭]答案

【问题标题】：IE css background issue [closed]IE css背景问题[关闭]
【发布时间】：2013-10-01 13:28:29
【问题描述】：

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

【问题讨论】：

不明白为什么不，你测试过吗？
您可能希望在渐变上方添加最后一行（其中包含图像）like this。
这在 IE9 及以下版本中不起作用

标签： css internet-explorer-9 linear-gradients

【解决方案1】：

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

身体 { 背景：网址（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 不会用过滤器替换背景图像。我更喜欢使用conditional comments：

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

请注意，条件 cmets 是 HTML。

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

【讨论】：