CSS(也许用 Compass):跨浏览器渐变 [英] CSS (perhaps with Compass): Cross-browser gradient

问题描述

我希望在所有主流浏览器中都能使用 CSS 中的渐变(可能通过 Compass)，包括IE7+.有没有一种简单的方法可以做到这一点(无需编写大量代码，也无需自定义图像文件)?

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)?

我查看了 Compass 的 渐变混合，但它不适用于 Internet Explorer.

I looked at Compass's gradient mixin, but it does not work with Internet Explorer.

有什么想法吗?(它不需要是 Compass ——我很乐意安装其他东西.)

Any ideas? (It does not need to be Compass -- I am happy install something else.)

我想要的是一些框架(比如 Compass?)，它生成的代码类似于 Blowsie 发布的代码，这些代码已经过跨浏览器测试.基本上就像 Compass 渐变混合 我提到，但有 IE 支持.(我有点担心只是滚动我自己的 SCSS mixin 并粘贴到 Blowsie 的代码之类的块中，因为我没有对其进行测试，也没有资源这样做.)

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.)

推荐答案

我刚刚注意到当前的 Compass beta (0.11.beta.6) 支持在 compass/css3/images 模块(它取代了以前的渐变模块)，因此您可以生成渐变两个简短的命令:

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);
}

我想我宁愿在一次调用中同时使用 IE 和非 IE 渐变代码，但由于 IE 的 DXImageTransform 渐变功能非常有限，这可能是不可能的.

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(也许用 Compass):跨浏览器渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！