IEに-webkit-gradientを適用する方法は？

Question

私は、次の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, left bottom, left top, from(#5AE), to(#036)); 
} 

おかげ

Answer 1

-webkit-gradient()はWebKitのブラウザのみ（サファリ、クロムなど）のためです。つまり、Firefox、Internet Explorer、Opera、または-webkit-gradient()をサポートしていないブラウザでは動作しません。

がで生成：

/* 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)" 

注：あなたはすべての最新ブラウザでの勾配を取得したい場合は

は、次のコードを試してみてくださいあなたが任意の外部のJavaScriptライブラリを必要としませんIEでグラデーションを取得します。単にCSSを上記のように使用してください。）しかし、自分自身のために、LESSやSASSなどのプリプロセッサを使用して、ブラウザ固有のバージョンをすべて自動的に生成させることをお勧めします。

Answer 2

CSS3 PIE documentationは、線形グラデーションのために、この例があります：

#myElement { 
    background: #CCC; /*fallback for non-CSS3 browsers*/ 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/ 
    background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/ 
    background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/ 
    background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/ 
    background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/ 
    background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/ 
    -pie-background: linear-gradient(#CCC, #EEE); /*PIE*/ 
    behavior: url(PIE.htc); 
} 

あなたは-pie-backgroundプロパティが欠落しています。

脇に、現在持っているものではなく新しいWebkit構文を使用する必要があります。 Webkitがそれを放棄してからかなりの間、それがありました。

Answer 3

使用
http://www.colorzilla.com/gradient-editor/
クリックあなたのCSSスタイル生成するため、このツールImport from css

background: rgb(85,170,238); /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1YWFlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDMzNjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(top, rgba(85,170,238,1) 0%, rgba(0,51,102,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,170,238,1)), color-stop(100%,rgba(0,51,102,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(85,170,238,1) 0%,rgba(0,51,102,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#55aaee', endColorstr='#003366',GradientType=0); /* IE6-8 */ 

Answer 4

はIE8のためには、これは

background: #aaa; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#aaaaaa',GradientType=1); 

IE9については、以下が動作する追加することができます

background-image: -ms-linear-gradient(left, #111, #aaa);