Question

我想在CSS中获得一个渐变（可能通过Compass），它适用于所有主流浏览器，包括IE7 +。有没有一种简单的方法（没有编写大量代码，也没有自定义图像文件）？

我查看了Compass的gradient mixin，但它不适用于Internet Explorer。

有什么想法吗？（它不需要是指南针 - 我很高兴安装别的东西。）

编辑：我想要获得的是一些框架（如Compass？），它生成的代码类似于Blowsie发布的已经过浏览器测试的代码。基本上就像我提到的Compass gradient mixin，但有IE支持。（我有点担心只是滚动我自己的SCSS mixin并粘贴像Blowsie的代码这样的块，因为我没有测试它并且没有资源这样做。）

Answer 1

我刚注意到目前的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渐变功能非常有限，这可能是不可能的。

Answer 2

我用于所有浏览器渐变的代码..

            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应用于元素，以使其工作，即

Answer 3

虽然渐变的复杂性有限，但它们足够复杂，需要您考虑“大量代码”。

考虑：

开始颜色，结束颜色和在一个和另一个之间转换所需的十六进制数学
“步骤”的数量
每个步骤的宽度/高度
由于没有纯CSS的方法，这意味着渲染HTML，每个颜色/步骤一个元素，而不会弄乱你现有的HTML

所以，不，如果没有为您完成所有这些操作的插件，则需要一些代码或图像。

CSS（可能与Compass）：跨浏览器渐变

3 个答案: