[PR]ﾃﾚﾋﾞ番組表
今夜の番組ﾁｪｯｸ

　

　

フィルタ表示の種類

スタート位置と不透明度の指定

Netscapeの不透明フィルタ

Page Top ▲

Filter:Alpha

要素を半透明に表示させます。
不透明度は（0〜100）、フィルターの種類は（0=単一・1=扇状・2=放射状・3=長方形）です。
不透明にする開始・終了位置、開始・終了の不透明度も指定できます。

●関連プロパティ

FILTER-BLUR | FILTER-CHROMA | FILTER-DROPSHADOW | FILTER-FLIP | FILTER-GRAY | FILTER-GROW | FILTER-INVERT | FILTER-MASK | FILTER-SHADOW | FILTER-WAVE | FILTER-XRAY | BLEND TRANS | REVEAL TRANS

{ filter: alpha ( opacity=start opacity, finishopacity=finish opacity, style=filter type(0-3), startｘ=start position-x, straty=start position-y, finishx=finish position-x, finishy=finish position-y) }

 

フィルタ表示の種類

フィルタの種類は、0で指定した要素を単一不透明化します。また、1で扇状、2で放射状、3で長方形にグラデーションで不透明化します。

Default

<div style="filter: alpha(opacity=50, style=0); background-color: rgb(51,77,204);"><p style="color: rgb(204,204,204);">Filter Alpha Style 0</p></div>

Filter Alpha Style 0

<div style="filter: alpha(opacity=50, style=1);; background-color: rgb(51,77,204)"><p style="color: rgb(204,204,204);"></p></div>

Filter Alpha Style 1

<div style="filter: alpha(opacity=50, style=2);; background-color: rgb(51,77,204)"><p style="color: rgb(204,204,204);">Filter Alpha Style 1</p></div>

Filter Alpha Style 2

<div style="filter: alpha(opacity=50, style=3);"><p style="color: rgb(204,204,204);">Filter Alpha Style 3</p></div>

Filter Alpha Style 3

<td style="filter: alpha (opacity=25, style=0);"><img src="sample.jpg"></div>

 　

<td style="filter: alpha (opacity=0, finishopacity=100, style=1);"><img src="sample.jpg"></div>
　

<td style="filter: alpha (opacity=100, finishopacity=0, style=2);"><img src="sample.jpg"></div>

 　

<td style="filter: alpha (opacity=100, finishopacity=0, style=3);"><img src="sample.jpg"></div>
　

 

フィルタのスタート位置と不透明度の指定

グラデーションの開始・終了の座標位置や開始・終了位置の不透明度を指定できます。
開始座標位置は、STARTXで横、STARTYで縦の位置。終了座標位置は、FINISHXで横、FINISHYで縦の位置を指定します。座標位置の値は、 要素サイズに対するパーセントになります。
不透明度は、OPACITYで開始位置の不透明度、FINISHOPACITYで終了位置の不透明度を指定します。 値は、0から100で、0で要素が透明になり、100で要素が不透明（デフォルトの状態）になります。

<div style="filter: alpha(startx=0, style=1); background-color: rgb(51,77,204);"><p style="color: rgb(204,204,204);">Filter Alpha Startx 0</p></div>

Filter Alpha Startx 0

<div style="filter: alpha(startx=30, style=1); background-color: rgb(51,77,204);"><p style="color: rgb(204,204,204);">Filter Alpha Startx 30</p></div>

Filter Alpha Startx 30

<div style="filter: alpha(finishx=80, style=1); background-color: rgb(51,77,204);"><p style="color: rgb(204,204,204);">Filter Alpha Finishx 80</p></div>

Filter Alpha Finishx 80

<div style="filter: alpha(opacity=50, style=1); background-color: rgb(51,77,204);"><p style="color: rgb(204,204,204);">Filter Alpha Opacity 50</p></div>

Filter Alpha Opacity 50

<div style="filter: alpha(finishopacity=25, style=1); background-color: rgb(51,77,204);"><p style="color: rgb(204,204,204);">Filter Alpha Finishopacity 25</p></div>

Filter Alpha Finishopacity 25

 

Netscapeの透明フィルタ

フィルタは、Netscapeに対応していませんが、不透明フィルタは、「-moz-opacity」でNN6.0から対応しています。ただし、ALPHAのようなグラデーション効果はできません。値は、0で透明に、1で不透明になります。
サンプルは、マウスが触れると要素を50%透明化します。スタイルシートに、ALPHA（OPACITY=50）に-MOZ-OPACITY:0.5を併用することで、NN6.0から同じ効果が得られます。

{ -moz-opacity : opacity value }

<style type="text/css">
<!--
div.trans-off { position: relative; height: 48px; width: 100%;
                background-color: rgb(51,77,204); }
div.trans-on  { position: relative; height: 48px; width: 100%;
                background-color: rgb(51,77,204);
                filter: alpha(opacity=50); -moz-opacity: 0.5; }
-->
</style>

　

<div class="trans-off" onmouseover="this.className='trans-on'" onmouseout="this.className='trans-off'"><p>Filter MOZ-OPACITY</p></div>

Filter MOZ-OPACITY