在Firefox3.5和更低版本中有什么解决方案来支持CSS渐变吗？

Question

在Firefox3.5和更低版本中有什么解决方案来支持CSS渐变吗？

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

Answer 1

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

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

如果您仍然设置为绝对不使用BG图像，那么唯一的选择就是使用JavaScript。这里有一个脚本，应该可以在Firefox3和更高版本中使用，甚至可以在Firefox2中使用：JavaScript Gradient Roundrects。

代码看起来像这样：

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

但这仍然是一个间接的方法，以实现一个简单的1x50px PNG图像可以获得的结果。

Answer 2

虽然这篇名为"Cross-Browser CSS Gradient“的文章解释了如何在所有浏览器中使用css3渐变功能，但它仍然仅限于FireFox 3.6+。

因此，除了"Super-Easy Blendy Backgrounds“之外，这篇2006年的老文章可能会提供另一种选择(但不是针对您可能需要的所有用例)。

CSS3将实现一个背景大小的属性，但由于CSS3的ETA为never，所以现在没有帮助。那么我们该怎么办呢？

嗯，我们使用一些可以缩放的东西，比如img元素。我们可以使用img元素，并将宽度和高度设置为100%，而不是使用背景来显示PNG混合。

​

​

，使用如下的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>