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

我有以下css代码：

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

这在Chrome中非常好地显示了背景. Internet Explorer只显示白色背景.我尝试使用CSS 3馅饼,它没有改变任何东西.

以下是我的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,to(#036)); 
}

谢谢

解决方法

-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,1));

/* Chrome 7+ & Safari 5.03+ */
background: -webkit-gradient(linear,color-stop(0,1)),color-stop(1,1)));

/* Newer Browsers */
background: linear-gradient(top,1));

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

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

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