我想要在每个主要浏览器(包括IE7)中使用CSS(或许通过
Compass)的渐变.有没有一个简单的方法来做(没有写大量的代码,没有自定义的图像文件)？
我看了指南针的gradient mixin,但它并不适用于Internet Explorer.
有任何想法吗？ (它不需要是指南针 – 我很高兴安装别的东西)
编辑：我想要得到的是一些框架(如Compass？),它生成像Blowsie发布的代码,这些代码在浏览器之间进行了测试.基本上像Compass gradient mixin我提到的,但是用IE支持. (我有点担心,只是滚动我自己的SCSS mixin和粘贴在块像Blowsie的代码,因为我没有测试,没有资源这样做.)
解决方法
我刚刚注意到,目前的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,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,#eeeeee);
background: -o-linear-gradient(top,#eeeeee);
background: linear-gradient(top,#eeeeee);
}
我想我会喜欢在一个调用中有IE和非IE渐变代码,但是由于IE的DXImageTransform渐变功能非常有限,这可能是不可能的.
