12

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

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

有任何想法吗？（它不需要是指南针——我很乐意安装其他东西。）

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

4

3 回答 3

29

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

于 2011-04-14T21:37:41.483 回答
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 应用于元素，以便在其中工作，即

于 2011-04-14T15:44:48.527 回答
-1

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

考虑：

  • 起始颜色、结束颜色和在一个和另一个之间转换所需的十六进制数学
  • “步数”
  • 每一步的宽度/高度
  • 由于没有纯 CSS 方式来执行此操作，这意味着渲染 HTML，每个颜色/步骤一个元素，而不会弄乱您现有的 HTML

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

于 2011-04-14T14:53:27.547 回答