IE9中的CSS渐变效果

Question

我尝试使用“终极CSS渐变生成器”，它生成了以下内容：

我尝试使用“终极CSS渐变生成器”，它生成了以下内容：

background: #657575; /* Old browsers */
background: -moz-linear-gradient(left, #657575 0%, #758585 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#657575), color-stop(100%,#758585)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #657575 0%,#758585 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #657575 0%,#758585 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #657575 0%,#758585 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#657575', endColorstr='#758585',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, #657575 0%,#758585 100%); /* W3C */

但是似乎渐变至少在我的IE9版本中不起作用。那么有没有办法在IE9中制作一个简单的水平渐变呢？

- Rubin

---

可能是Internet Explorer 9中的渐变的重复问题。 - bzlm

Answer 1

IE9是否支持CSS线性渐变？

background:#fff;
background-image: -moz-linear-gradient(top, #fff, #000);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #000));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/ 

- Tom

---

对于水平渐变（如问题中所提到的），您需要使用GradientType=1。文档在此处：http://msdn.microsoft.com/en-us/library/ms532887(v=vs.85).aspx - Greg Ball

Answer 2

这里有一个可能会对你在CSS渐变方面有所帮助的网站：
http://www.htmlcenter.com/blog/cross-browser-gradient-backgrounds/

在我的看法中，对于高度固定的元素，我通常使用1像素的图片，并将其在元素的宽度上重复。这样你就可以确保在所有浏览器中它的外观都是一样的。

例如：

.element{
height: 30px;
background: url(<1px image location>) repeat-x;
}

还有一些网站可以为您创建这些渐变图像。
以下是一个免费使用的网站：
http://www.ogim.4u2ges.com/gradient-image-maker.asp

- jaredmahan

---

这是一种旧的做法。现在使用CSS渐变更为主流。您还可以使用Less或Sass混合来使其更加简便。 - jaredmahan