2

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

4

6 回答 6

4

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

无论如何，目前在 css 中还没有明确的标准。我们希望它会尽快到达！

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

CSS 饼图

于 2012-09-28T16:21:45.360 回答
1

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

于 2012-09-28T16:23:01.117 回答
1

没有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 */
于 2012-09-28T16:23:36.920 回答
1

使用此工具生成渐变

于 2012-09-28T16:21:47.450 回答
0

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

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

对于 IE8，您可以使用

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

参考

对于 IE 5.5 - 7：

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

参考

startColorStr并且endColorStr非常不言自明。GradientType用于1水平和0垂直。在 IE9 之前没有径向渐变或对角渐变之类的东西。

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

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

于 2012-09-28T16:34:12.653 回答
0

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

于 2012-09-28T16:39:51.217 回答