[新着] Webテンプレートを仮オープンしました
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座標 |
【フィルタなしの状態】
<img src="image/friend.gif" alt="IMG" width="170" height="140">
<div style="font: bold 170% sans-serif; width: 100%;">
フィルタの表示テスト
</div>
【グラデーションなし・半透明】
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=0, opacity=30);">
<div style="font: bold 170% sans-serif; width: 100%; filter: alpha(style=0, opacity=30);">
フィルタの表示テスト
</div>
【線形グラデーション・方向・位置】
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=1, opacity=0, finishopacity=100);">
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=1, opacity=100, finishopacity=0);">
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=1, opacity=100, finishopacity=0, startx=85, starty=0, finishx=85, finishy=140);">
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=170, finishy=140);">
<div style="font: bold 170% sans-serif; width: 10em; filter: alpha(style=1, opacity=0, finishopacity=100);">
フィルタの表示テスト
</div>
【円形グラデーション・方向】
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=2, opacity=100);">
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=2, opacity=0, finishopacity=100);">
<div style="font: bold 170% sans-serif; width: 10em; filter: alpha(style=2, opacity=100);">
フィルタの表示テスト
</div>
【長方形グラデーション・方向】
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=3, opacity=100);">
<img src="image/friend.gif" alt="IMG" width="170" height="140" style="filter: alpha(style=3, opacity=0, finishopacity=100);">
<div style="font: bold 170% sans-serif; width: 10em; filter: alpha(style=3, opacity=100);">
フィルタの表示テスト
</div>
