如何应用-webkit渐变到IE？ [英] How to apply -webkit-gradient to IE?

问题描述

我有以下css代码：

  -webkit-gradient（线性，左下，左上， 5AE）到（＃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（线性，左下，左上，从＃5AE）到（＃036））; 
} 
  

感谢

解决方案

-webkit-gradient（）仅适用于 webkit浏览器（Safari，Chrome等）。这意味着它不能在不支持 -webkit-gradient（）的Firefox，Internet Explorer，Opera或任何其他浏览器中使用。

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

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

  / * SVG回退（歌剧11.10-，IE9）* / 
背景：网址（数据：图像/ 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）））; 
 
 / *新版浏览器* / 
 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，以便自动生成所有浏览器特定的版本。 
 
I have the following css code:
-webkit-gradient(linear, left bottom, left top, from(#5AE), to(#036));
Which displays the background very nicely in Chrome. Internet explorer just displays a white background. I tried applying CSS 3 pie, which didnt change anything. 

Following is my 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)); 
}
Thanks
解决方案
-webkit-gradient() is for webkit browsers only (Safari, Chrome, etc). This means it will not work in Firefox, Internet Explorer, Opera, or any other browser that does not support -webkit-gradient().

If you want to get gradient in all modern browsers, try the following code:

Generated at 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)"
Note: You don't need any external JavaScript library to get gradients in IE. Simply use the CSS from above ;) However, for your own sanity, I would suggest using a preprocessor such as LESS or SASS so you can have all of the browser-specific versions automatically generated.

                        
这篇关于如何应用-webkit渐变到IE？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！