CSS(也许指南针):跨浏览器渐变 [英] CSS (perhaps with Compass): Cross-browser gradient
问题描述
我想获得一个CSS梯度(也许是通过罗盘),在每一个主要的浏览器,包括IE7 +的作品。有一个简单的方法来做到这一点(不写了很多code,并没有自定义图像文件)?
I would like to get a gradient in CSS (perhaps through Compass) that works in every major browser, including IE7+. Is there an easy way to do this (without writing a lot of code, and without a custom image file)?
我看了看指南针的梯度混入,但它确实不使用Internet Explorer的工作。
I looked at Compass's gradient mixin, but it does not work with Internet Explorer.
任何想法? (它不需要是指南针 - 我很高兴安装别的东西)
Any ideas? (It does not need to be Compass -- I am happy install something else.)
编辑:我想获得一些框架(如指南针?),其产生code像什么Blowsie发布一个已经跨浏览器测试。基本上像罗盘梯度混入我提及,但与IE浏览器的支持。 (我有点戒心只是滚滚像Blowsie的code块我自己的SCSS混入和粘贴,因为我没有测试它,没有资源来做到这一点。)
What I am trying to get is some framework (like Compass?) that generates code like what Blowsie posted that's been tested across browsers. Basically like the Compass gradient mixin I mentioned, but with IE support. (I am a bit wary of just rolling my own SCSS mixin and pasting in blocks like Blowsie's code, because I haven't tested it and do not have the resources to do so.)
推荐答案
我只注意到,目前北斗β(0.11.beta.6)有在的指南针/ CSS3 /图像模块(这取代了previous梯度模块),这样你就可以一共有两个生成的渐变简短的命令:
I just noticed that the current Compass beta (0.11.beta.6) has support for generating IE gradients in the compass/css3/images module (which supersedes the previous gradient module), so you can generate your gradients with a total of two short commands:
@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的摆如下:
This generates the following slew of 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);
}
我想我会有preferred有一个调用IE和非IE梯度code,但由于IE的DXImageTransform梯度功能是pretty有限,这可能是不可能的。
I guess I would have preferred to have the IE and non-IE gradient code in one call, but since IE's DXImageTransform gradient function is pretty limited, that is probably not possible.
这篇关于CSS(也许指南针):跨浏览器渐变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!