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

Posted 2023-02-25

【中文标题】是否有跨浏览器、向后兼容的方式来编码背景渐变？

【英文标题】：Is there a cross-browser, backwards compatible way to code a background gradient?

【发布时间】：2012-09-28 16:19:09

【问题描述】：

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

【问题讨论】：

为什么不直接使用 1 像素宽、n 像素高的图像作为具有渐变的背景，然后在 x 轴上复制它。这是老式的，但它的工作原理。

@Miguel-F 你想要更宽的图像。在重复非常窄的图像（闪烁、缓慢滚动）时，某些浏览器的性能非常差。一个安全的选择是使用至少大约 20 像素或更高宽/高的图像。

【参考方案1】：

这是一个相当完整的渐变生成器 colorzilla

反正目前css还没有一个明确的标准。我们希望它会尽快到达！

如果您想在 Explorer 6-8 中使用类似 CSS3 的方法（例如 linear-gradient(#EEFF99, #66EE33)，并且不使用 Explorer 专有的 filter）看到一些渐变，您可以尝试 Css PIE。我广泛使用它，它是一款基于 html 组件 (.htc) 的令人惊叹的软件，特别适用于按钮，但根据我的经验，当您的页面依赖于许多 ajax 效果时会出现一些问题，特别是如果您重新调整框架的大小时/page，因为并非总是更新按钮/渐变。 （反正重要的网站也会用到 CSS Pie）

Css PIE

【参考方案2】：

使用this tool 生成渐变

【参考方案3】：

旧浏览器 (

【讨论】：

有一些工具可以为旧版 IE 提供 CSS 渐变。

雷南：是的。它们不支持 CSS3 渐变……但它们确实支持过滤器。而且它们内置了渐变支持。

【参考方案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 */

【讨论】：

ie7 部分。查看其他答案以获取更多信息。

AFAIK 这个特定代码在 IE7 中不起作用。我一开始就讲这个。您可以使用过滤器，但据我了解，这是一个可怕的 hack，我不使用它们。

【参考方案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），因为它们会产生很多副作用。

实现起来并不容易，但如果你需要一个 polyfill，可以使用 cssSandpaper。

【参考方案6】：

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