グラデーション効果(CSSフィルター)

filter:alpha();

CSSの書き方

filter:alpha(opacity= ,finishopacity= ,style= ,startx= ,starty= ,finishx= ,finishy= );

CSSの詳細情報
プロパティ名 filter:alpha(); 読み方 フィルター・アルファ
初期値 すべての属性で「0」 意味 透明化グラデーション
数値
対象 body/button/div/img/input/marquee/span/table/td/textarea/tfoot/th/thead/tr
※ただし、spanとdiv要素は「width」、「height」プロパティが指定されているか、「position:absolute;」が指定されていなければならない。
CSSレベル IE独自 対応ブラウザ Windows MAC
継承 する IE 5.0以上

解説

「filter:alpha();」はグラデーションしながら透明化させるフィルターです。

各項目と設定については以下の表をご覧ください。

なお、設定項目の一部は省略できます。

設定項目 内容
opacity 開始点の不透明度 0〜100までの整数(0が透明。100が不透明)
finishopacity 終了点の不透明度 0〜100までの整数(0が透明。100が不透明)
style グラデーションの形 0は一定、1は直線、2は放射線、3は長方形
startx 不透明度の開始X座標 正の整数(0〜)
starty 不透明度の開始Y座標 正の整数(0〜)
finishx 不透明度の終了X座標 正の整数(0〜)
finishy/td> 不透明度の開始Y座標 正の整数(0〜)

CSS/HTMLサンプル

img { filter:alpha(opacity=90 ,finishopacity=20 ,style=1) ; }

alphaフィルターをIMG要素に サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!