如何将-webkit-gradient应用于IE？

Posted 2023-05-08

【中文标题】如何将-webkit-gradient应用于IE？

【英文标题】：How to apply -webkit-gradient to IE?

【发布时间】：2012-04-27 06:26:49

【问题描述】：

我有以下css代码：

-webkit-gradient(linear, left bottom, left top, from(#5AE), to(#036));

它在 Chrome 中很好地显示了背景。 Internet Explorer 仅显示白色背景。我尝试应用 CSS 3 pie，它没有改变任何东西。

以下是我的css：

body 
  behavior: url(css3pie/PIE.htc);
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    /*background:url("../image/bg.png") repeat scroll 0 0 transparent;*/
    background: -webkit-gradient(linear, left bottom, left top, from(#5AE), to(#036)); 

谢谢

【问题讨论】：

@RobW：绝对不是骗子，这个特别提到了 CSS3pie 兼容性 shim。

【参考方案1】：

-webkit-gradient() 仅适用于 webkit 浏览器（Safari、Chrome 等）。这意味着它无法在 Firefox、Internet Explorer、Opera 或任何其他不支持-webkit-gradient() 的浏览器中运行。

如果您想在所有现代浏览器中获得渐变，请尝试以下代码：

生成于http://projects.korrelboom.com/gradient-generator/:

/* SVG fallback(Opera 11.10-, IE9) */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDAsNTEsMTAyLDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoODUsMTcwLDIzOCwxKTsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);

/* Opera 11.10+ */
background: -o-linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));

/* Firefox 3.6+ */
background: -moz-linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));

/* Chrome 7+ & Safari 5.03+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,51,102,1)), color-stop(1, rgba(85,170,238,1)));

/* Newer Browsers */
background: linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));

/* IE5.5 - IE7 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF003366,EndColorStr=#FF55AAEE);

/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF003366,EndColorStr=#FF55AAEE)"

注意：您不需要任何外部 javascript 库即可在 IE 中获取渐变。只需使用上面的 CSS ;) 但是，为了您自己的理智，我建议您使用 LESS 或 SASS 之类的预处理器，这样您就可以自动生成所有特定于浏览器的版本。

【讨论】：

我认为你不能用过滤器做所有的渐变，例如渐变停止在 x%。还是有其他过滤器符号？

@Neil，它将 SVG 变成一个 URL（将 url() 的值粘贴到您的浏览器位置栏中）。

我知道什么是 data: URL，我只是怀疑 base64 编码的有效性。

即使这样可行，这是错误的。一旦您下载了额外的资源，SVG 后备。如果存在原生 CSS 支持，这将是加载事件。这违背了 CSS3 渐变的全部目的。其次，不要使用过滤器作为后备。它们不是任何标准的一部分。只需轻轻降级，让旧事物消亡。

@Mircea，我完全同意你的看法。然而，并不是每个人都可以优雅地降级，尤其是在企业界。但是，-moz-、-webkit- 和 -o- 前缀也不应该在公共使用中使用，因此，在理想的世界中，这些也不会包括在内。

【参考方案2】：

CSS3 PIE documentation 有这个线性渐变的例子：

#myElement 
    background: #CCC; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/
    background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
    behavior: url(PIE.htc);

您缺少-pie-background 属性。

顺便说一句，您应该使用“new webkit”语法，而不是您当前使用的语法； Webkit 放弃它已经有一段时间了。

【讨论】：

感谢您的回答！我会记住你的建议。 @bfrohs 的答案是复制/粘贴。

【参考方案3】：

对于 IE8 你可以添加这个

background: #aaa;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#aaaaaa',GradientType=1);

对于 IE9，以下将起作用

background-image: -ms-linear-gradient(left, #111, #aaa);

【讨论】：

CSS 渐变不适用于 IE9，无论有 -ms- 前缀还是没有它。 IE10的“IE9模式”与真正的IE9不一样，它是为了旧代码与新浏览器的兼容，而不是为了在旧浏览器中测试新代码。在所有发布的 IE10 版本中，无前缀语法都应该可以工作，因此不需要 -ms-prefixed 语法。

【参考方案4】：

使用此工具生成您的 Css 样式http://www.colorzilla.com/gradient-editor/ 点击Import from css

background: rgb(85,170,238); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1YWFlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDMzNjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(85,170,238,1) 0%, rgba(0,51,102,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,170,238,1)), color-stop(100%,rgba(0,51,102,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55aaee', endColorstr='#003366',GradientType=0 ); /* IE6-8 */