IE css背景問題

-1

由於IE不支持「線性漸變」，以下是否正確？IE css背景問題

background: #f5f7f9; /* Old browsers */ 
    background: -moz-linear-gradient(top, #f5f7f9 0%, #cdcdcd 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f7f9), color-stop(100%,#cdcdcd)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f5f7f9 0%,#cdcdcd 100%); /* W3C */ 
    background:url(../img/backgrounds/form_bg.png) 0 0 no-repeat;

我基本上提供圖像後備。

這不是在IE9工作，下面

來源

2013-10-01 Alex

不明白爲什麼不，你測試過嗎？ – plvdmeer

您可能想要將最後一行（包含圖像）添加到漸變上方[[像這樣]]（http://jsbin.com/uyOhEWi/2/）。 –

這不適用於IE9及以下版本 – Alex

首先，把你的後備第一級聯。例如：

 
body { 
    background: url(http://placekitten.com/500/500) top center #cdcdcd no-repeat; 
    background: -moz-linear-gradient(top, #f5f7f9 0%, #cdcdcd 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f7f9), color-stop(100%,#cdcdcd)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f5f7f9 0%,#cdcdcd 100%); /* W3C */ 
}

現代瀏覽器認爲漸變是一種背景圖像。在回退之後，可以理解回退的瀏覽器將使用它，並且可以理解其他規範的瀏覽器將使用漸變覆蓋回退。例如，IE7只會瞭解背景圖片，並忽略漸變。 Chrome會執行背景圖片，然後用linear-gradient覆蓋背景圖片。

二，-ms-linear-gradient支持從IE10開始;它不被IE9支持，所以這就是爲什麼它不能在IE9及以下版本中使用。

您可以通過6例使用過濾器IE9的：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3838', endColorstr='#00ffffff',GradientType=0); /* IE6-9 */

如果您使用過濾器，您還需要禁用後備圖片，因爲IE 6 - 9不更換背景圖片過濾器。我喜歡用conditional comments做到這一點：

<!--[if (gte IE 6)&(lte IE 9)]> 
<style type="text/css"> 
body { background-image: none; } 
</style> 
<![endif]-->

注意，有條件的評論是HTML。

最後，大多數網站可能不需要-moz，-webkit或-o前綴;他們每個人都有supported the standard linear-gradient for a while。

來源

2013-10-01 17:51:36 KatieK

IE css背景問題

回答

相關問題