mrs.suzu841.com 管理人の四方山(よもやま) tips





edit.gif CSS3 html ページの背景を IE にも対応したグラデーションの記述

まずは、Demo Page を見てください。この Demo Page は、背景のグラデーションは画像を使わずに CSS3 で以下のように記述して Firefox3.6、IE などに反映させています。

background: -moz- で始まる行は Firefox 3.6 、
background-image: -webkit- で始まる行は Safari や Chrome
filter: progid: で始まる行は IE6 や IE7
-ms-filter: "progid: で始まる行は IE8 に対応のようです。

私のWindows環境の Opera10.60 では、残念ながら非対応でした。



body {
background: -moz-linear-gradient(top, #e4f1ff, #97b0f2 50%, #1727aa);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #e4f1ff),color-stop(0, #1727aa));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e4f1ff', endColorstr='#1727aa');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e4f1ff', endColorstr='#1727aa')";
}



参考ページ : webbibo | SMASHING