filter: alpha(***);

ブラウザ
  • IE
プロパティ
  • 独自拡張プロパティ
IE10以降は未対応となりました。

alpha は、半透明のグラデーションをかけるフィルタです。

グラデーションの形や透明度、方向などを指定することができます。


.example {
filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=200, finishy=200);
}
属性 値と説明
style グラデーションのスタイル
0 = グラデーションなし｜1 = 線形｜2 = 円形｜3 = 長方形
opacity 開始透明度
0 （透明） ～ 100 （不透明）
finishopacity 終了透明度
0 （透明） ～ 100 （不透明）
startx
starty		 開始位置 （線形で使用可）
X座標 と Y座標
finishx
finishy		 終了位置 （線形で使用可）
X座標 と Y座標
  • このプロパティは、CSS 2では定義されていません。

使用例

フィルタなしの状態
<p><img src="example1.gif" alt="［サンプル］"></p>

［サンプル］

<div style="font: bold 170% sans-serif; width: 100%;">
フィルタの表示テスト
</div>
フィルタの表示テスト
グラデーションなし・半透明
<p><img src="example1.gif" alt="［サンプル］" style="filter: alpha(style=0, opacity=30);"></p>

［サンプル］

<div style="font: bold 170% sans-serif; width: 100%; filter: alpha(style=0, opacity=30);">
フィルタの表示テスト
</div>
フィルタの表示テスト
線形グラデーション・方向・位置
<p><img src="example1.gif" alt="［サンプル］" style="filter: alpha(style=1, opacity=0, finishopacity=100);"></p>

［サンプル］

<p><img src="example1.gif" alt="［サンプル］" style="filter: alpha(style=1, opacity=100, finishopacity=0);"></p>

［サンプル］

<p><img src="example1.gif" alt="［サンプル］" style="filter: alpha(style=1, opacity=100, finishopacity=0, startx=85, starty=0, finishx=85, finishy=130);"></p>

［サンプル］

<p><img src="example1.gif" alt="［サンプル］" style="filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=170, finishy=130);"></p>

［サンプル］

<div style="font: bold 170% sans-serif; width: 10em; filter: alpha(style=1, opacity=0, finishopacity=100);">
フィルタの表示テスト
</div>
フィルタの表示テスト
円形グラデーション・方向
<p><img src="example1.gif" alt="［サンプル］" style="filter: alpha(style=2, opacity=100);"></p>

［サンプル］

<p><img src="example1.gif" alt="［サンプル］" style="filter: alpha(style=2, opacity=0, finishopacity=100);"></p>

［サンプル］

<div style="font: bold 170% sans-serif; width: 10em; filter: alpha(style=2, opacity=100);">
フィルタの表示テスト
</div>
フィルタの表示テスト
長方形グラデーション・方向
<p><img src="example1.gif" alt="［サンプル］" style="filter: alpha(style=3, opacity=100);"></p>

［サンプル］

<p><img src="example1.gif" alt="［サンプル］" style="filter: alpha(style=3, opacity=0, finishopacity=100);"></p>

［サンプル］

<div style="font: bold 170% sans-serif; width: 10em; filter: alpha(style=3, opacity=100);">
フィルタの表示テスト
</div>
フィルタの表示テスト