filter: alpha(***);
- ブラウザ
- 特性
- 独自拡張プロパティ
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座標 |
使用例
■フィルタなしの状態
※画像のサイズは 170px × 130px です。
<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>
フィルタの表示テスト
- サイト内検索
