背景をグラデーションにする


動作ブラウザ 【 IE:5.5  NN:-
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × × - × × × × × × - × -
Macintosh × × × × - × × × × × - - ×
UNIX - - - - - × × × × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント myIMG.filters[0].StartColorStr = sc; myIMG.filters[0].EndColorStr = ec; <body id="myIMG" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#550000FF, endColorstr=#55FFFF00)">
説  明 IE5.5以降では背景や各種オブジェクトにグラデーション表示ができます。スタイルシートでprogid:DXImageTransform.Microsoft.Gradientを指定しstartColorstrで開始色、endColorstrで終了色を指定します。グラデーションの方向は横または縦方向になります。方向はGradientTypeで指定し、縦が0、横が1になります。
サンプル <html> <head> <title>背景をグラデーションにする</title> <script language="JavaScript"><!-- function setGrad() { sc = document.myFORM.start.value; ec = document.myFORM.end.value; myIMG.filters[0].StartColorStr = sc; myIMG.filters[0].EndColorStr = ec; } // --></script> </head> <body id="myIMG" style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#550000FF, endColorstr=#55FFFF00)"> <br> <form name="myFORM"> 開始色:<input type="text" name="start"><br> 終了色:<input type="text" name="end" ><br>     <input type="button" value="設定" onClick="setGrad()"> </form> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA