Question

我一直在寻找适用于现代浏览器和IE版本的背景渐变的解决方案，如果某人有最佳实践，我会很感激这种方法，因为我一直在遇到破解的解决方案某个浏览器或版本。它应该至少在IE7-9，Firefox，Safari，Opera和Chrome中工作。

Answer 1

这是一个非常完整的梯度生成器 colorzilla

目前还没有明确的css标准。我们希望它能尽快到来！

如果您希望在资源管理器6-8中使用类似CSS3的方法（例如linear-gradient(#EEFF99, #66EE33)，而不使用资源管理器专有filter）看到一些渐变，您可以尝试使用Css PIE。我广泛使用它，它是一个基于HTML组件（.htc）的奇妙软件，特别适用于按钮，但是根据我的经验，当你的页面依赖于许多ajax效果时会有一些问题，特别是如果你重新调整框架的大小/ page，因为并不总是更新按钮/渐变。（无论如何CSS Pie甚至在重要的网站上使用）

Css PIE

Answer 2

使用this tool生成渐变

Answer 3

旧浏览器（＆lt; IE7）不支持css渐变属性。您可以使用css3制作渐变背景，然后为旧浏览器设置纯色。

Answer 4

没有ie7，但这是一个好的开始

         background: -moz-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%, rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,rgba(150,150,150,0.2)), color-stop(52%,rgba(80,80,50,0.5)), color-stop(100%,rgba(20,20,20,0.8))); 
         background: -webkit-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: -o-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: -ms-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 

         /* FF3.6+ */ 
         /* Chrome,Safari4+ */
         /* Chrome10+,Safari5.1+ */ 
         /* Opera 11.10+ */
         /* IE10+ */ 
         /* W3C */

Answer 5

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

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

对于IE8，您可以使用

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

Reference

对于IE 5.5 - 7：

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

Reference

startColorStr和endColorStr非常明显。 GradientType横向为1，纵向为0。 IE9之前没有径向和对角渐变这样的东西。

我强烈建议您不要使用htc解决方案（如css3pie），因为它们会产生很多副作用。

实施起来并不容易，但如果你需要填充，那就是cssSandpaper。

Answer 6

我的回答与HTML或CSS无关。这是另一种方法，如果您了解使用MS Paint或GIMP创建渐变图像的基础知识，那么此技术将适用于所有类型的浏览器。

是否有跨浏览器，向后兼容的方式来编码背景渐变？

6 个答案: