我有以下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等预处理器,这样您就可以自动生成所有特定于浏览器的版本.
