我想在 CSS 中获得一个渐变（可能通过Compass），它适用于所有主流浏览器，包括 IE7+。有没有一种简单的方法可以做到这一点（无需编写大量代码，也无需自定义图像文件）？
我查看了 Compass 的 gradient mixin，但它不适用于 Internet Explorer。
有什么想法吗？ （它不需要是 Compass ——我很乐意安装其他东西。）
编辑：我想要得到的是一些框架（如 Compass？），它生成的代码类似于 Blowsie 发布的代码，这些代码已经过跨浏览器测试。基本上就像我提到的Compass gradient mixin，但支持IE。 （我有点担心只是滚动我自己的 SCSS mixin 并粘贴到像 Blowsie 的代码这样的块中，因为我还没有测试过它并且没有资源这样做。）
【问题讨论】：
标签： css background cross-browser gradient compass-sass
我刚刚注意到当前的 Compass beta (0.11.beta.6) 支持在 compass/css3/images 模块中生成 IE 渐变（它取代了之前的渐变模块），因此您可以生成总共两个渐变短命令：
@import "compass/css3/images";
@import "compass/utilities/general/hacks"; /* filter-gradient needs this */
.whatever {
/* IE; docs say this should go first (or better, placed in separate IE-only stylesheet): */
@include filter-gradient(#aaaaaa, #eeeeee);
/* Fallback: */
background: #cccccc;
/* CSS 3 plus vendor prefixes: */
@include background(linear-gradient(top, #aaaaaa, #eeeeee));
}
这会生成以下大量 CSS：
.whatever {
*zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')";
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE');
background: #cccccc;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee));
background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
background: linear-gradient(top, #aaaaaa, #eeeeee);
}
我想我宁愿在一次调用中同时使用 IE 和非 IE 渐变代码，但由于 IE 的 DXImageTransform 渐变功能非常有限，这可能是不可能的。
【讨论】：
filter-gradient 行。
$experimental-support-for-svg: true
我用于所有浏览器渐变的代码..
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom:1;
您需要指定高度或缩放：1 以将 hasLayout 应用于元素，以便在 ie 中工作
【讨论】：
虽然渐变的复杂性有限，但它们足够复杂，需要您认为“大量代码”。
考虑：
所以，不，如果没有为您完成所有这些工作的插件，则需要一些代码或图像。
【讨论】：