是否有任何解决方案可以在 Firefox 3.5 及更低版本中获得对 CSS Gradient 的支持？

Question

是否有任何解决方案可以在 firefox 3.5 及更低版本中获得对 CSS Gradient 的支持？

http://hacks.mozilla.org/2009/11/building-beautiful-buttons-with-css-gradients/

Answer 1

我强烈建议您只使用 BG 图像。我知道每个人都迫不及待地想要开始使用所有最新的 whiz-bang CSS3 功能，但我们都只需要等待 CSS3 的这些部分被主流浏览器采用（这将在 CSS3 到达 W3C 之前发生）推荐）。

使用特定于供应商的扩展是 IMO 的一种不好的做法，并且似乎回到了没有人关心 Web 标准的时代，Web 开发人员也只是为单个浏览器编写代码（以及俗气专为IE 按钮），或者必须以多种方式编写相同的代码来支持不同的浏览器。现在所有主流浏览器都支持 PNG alpha 层透明度。所以强制使用 CSS 来生成渐变并没有什么好处。它只会引入不必要的代码冗余。

如果您仍然坚持绝对不使用 BG 图像，那么唯一的选择就是使用 JavaScript。这是一个应该在 Firefox 3 及更高版本，甚至可能是 Firefox 2 中工作的脚本：JavaScript Gradient Roundrects。

代码如下所示：

var style = {
    'gradient-start-color': 0x99ddff,
    'gradient-end-color': 0xffffff,
    'border-radius': 1
};
OSGradient.applyGradient(style, $('#Disp')[0]);

但这仍然是一种迂回的方式来实现可以使用简单的 1x50 像素 PNG 图像获得的结果。

Answer 2

虽然本文“Cross-Browser CSS Gradient”解释了如何在所有浏览器中使用 css3 渐变功能，但仍仅限于 FireFox 3.6+。

因此，2006 年 List Apart “Super-Easy Blendy Backgrounds” 的这篇旧文章可能会提供替代方案（但并非适用于您可能需要的所有用例）

CSS3 将实现一个 background-size 属性，但由于 CSS3 的 ETA 为 never，所以现在没有任何帮助。那么我们该怎么做呢？
好吧，我们使用可以缩放的东西，比如 img 元素。除了使用背景来显示 PNG 混合，我们可以使用 img 元素，并将宽度和高度设置为 100%。

，CSS 如下：

<style type="text/css">.grad img {
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}
.box {
  border: solid orange 2px;
  float: left;
  margin: 1px;
  position: relative;
  width: 165px;
  padding: 5px;
}
.box * {
  margin: 0px;
  position: relative;
  z-index: 1;
}
* html .grad {
  filter: progid:DXImageTransform.Microsoft.AlphaImage »
Loader (src='grad_white.png', sizingMethod='scale');
}
* html .grad img {
  display: none;
}
* html .box {
    position:static;
}
.blue { 
  background-color: #2382a1; 
}
.green { 
  background-color: #4be22d; 
}
.pink { 
  background-color: #ff009d;
}
</style>

<!--[if IE 7]>
<style type="text/css">
.box {
  border: solid red 2px;
  height:2.5em;
}
</style>
<![endif]-->

和标记：

<div class="box grad blue">
  <img src="grad_white.png" alt="blur gradient box" />
  <p><a href="#">Ooo, linked text</a>!</p>

</div>
<div class="box grad pink">
  <img src="grad_white.png" alt="pink gradient box" />
  <p><a href="#">Ooo, linked text</a>!</p>
</div>

<div class="box grad green">
  <img src="grad_white.png" alt="green gradient box" />
  <p><a href="#">Ooo, linked text</a>!</p>
</div>