IE8のリニアグラデーションの適用方法

Question

リニアグラデーションは、IE8を除くすべてのブラウザで問題なく動作します。
私はprogid:DXImageTransform.Microsoft.gradientを追加しました...これはいくつかの勾配を与えましたが、期待される結果が異なります。
コード： -

div{ 
height:500px;width:500px; 
background-size: 50px 50px; 
background-color: #DDEEEE; 
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); 
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); 
background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); 
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); 
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#DDEEEE',GradientType=0);}  

どのように私はこの勾配の直線を作るのですか？

Answer 1

リニアグラデーションの作成に使用するCSSは次のとおりです。 IE8でもうまく動作します。唯一の違いは、gradTypeを0（垂直）ではなく1（水平）に設定し、別の色を使用していることです。

HTML

<div></div> 

CSS

div{width:400px;height:200px; 
    /*gradient background color */ 
    background: #0071a0; /* Old browsers */ 
    background: -moz-linear-gradient(left, #0071a0 1%, #ff0000 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#0071a0), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #0071a0 1%,#00a3ca 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #0071a0 1%,#ff0000 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #0071a0 1%,#ff0000 100%); /* IE10+ */ 
    background: linear-gradient(to right, #0071a0 1%,#ff0000 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0071a0', endColorstr='#ff0000',GradientType=1); /* IE6-9 */ 
    } 

http://jsfiddle.net/yAxbJ/

他の問題は、白の色に近い使用して、それにより顕著イマイチグラデーション効果されていることです。 ＃ff000などのより明確な開始色に変更して、グラデーションが実際に最初に機能しているかどうかを確認してください。また、背景色の値が重複しています。