是否有跨浏览器，向后兼容的方式来编码背景渐变？ [英] Is there a cross-browser, backwards compatible way to code a background gradient?

问题描述

我一直在寻找一个解决方案的背景渐变，在现代浏览器和版本的IE下降到7。如果有人有一个最佳实践，工作，我会欣赏的方法，我一直运行到解决方案，打破某个浏览器或版本。

I've been looking for a solution to background gradients that work in modern browsers and versions of IE down to 7. If someone has a best practice that works, I would appreciate the method as I keep running into solutions that break on a certain browser or version. It should atleast work in IE7-9, Firefox, Safari, Opera, and Chrome.

推荐答案

正如其他人所说，CSS3是兼容FF，Chrome等。

As other have said, CSS3 is compatible with FF, Chrome etc.

对于IE9，您可以使用官方 CSS Gradient Background Maker ，它将生成一个内嵌的SVG图像，也支持大多数现代浏览器（尽管它在Safari上提供了一些问题）。

For IE9, you can use their official CSS Gradient Background Maker, which will generate an inline SVG image, supported also by most of modern browsers (although it give some issues on Safari).

对于IE8，您可以使用

For IE8, you can use

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#000000, GradientType=1);

参考

对于IE 5.5 - 7：

For IE 5.5 - 7:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFF, endColorStr=#FFFFFF, GradientType=1);

参考

startColorStr 和 endColorStr 是不言自明的。 GradientType 是 1 表示水平， 0 表示垂直。在IE9之前没有径向和对角线梯度。

startColorStr and endColorStr are pretty self-explanatory. GradientType is 1 for horizontal and 0 for vertical. There's no such thing as radial nor diagonal gradients before IE9.

我强烈建议你不要使用htc解决方案（如css3pie）给予很多副作用。

I strongly suggest you not to use an htc solutions (like css3pie) as they give a lot of side effects.

这不是很容易实现，但如果你需要一个polyfill有 cssSandpaper 。

It's not really easy to implement, but if you need a polyfill there's cssSandpaper.

这篇关于是否有跨浏览器，向后兼容的方式来编码背景渐变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！