【Alpha()】透過して表示する

filterプロパティのAlpha()は、テキストや画像を半透明にしたり、半透明となるグラデーションをかけたりなど、透過して表示したい場合に使用します。

グラデーションの開始位置や透明度などは、各パラメータで指定して下さい。 また書式などに関して詳しくはfilterを参照して下さい。

書式

  • filter:progid:DXImageTransform.Microsoft.Alpha(★) ……… 透過して表示する(IE5.5以上)
  • filter:alpha(★) ……… 透過して表示する(IE4以上)

★:Opacity=開始位置の透明度、FinishOpacity=終了位置の透明度、他下記参照

Opacity=開始位置の透明度
開始位置の透明度を0(透明)~100(不透明)の範囲で指定します。
FinishOpacity=終了位置の透明度
終了位置の透明度を0(透明)~100(不透明)の範囲で指定します。
Style=透過の種類
フィルタの種類(グラデーションの種類)を指定します。「0」透過なし、「1」直線状、「2」放射状、「3」矩形状
StartX=開始位置
フィルタの開始地点(透過開始)のx座標を指定します。
StartY=開始位置
フィルタの開始地点(透過開始)のy座標を指定します
FinishX=終了位置
フィルタの終了地点(透過終了)のx座標を指定します
FinishY=終了位置
フィルタの終了地点(透過終了)のy座標を指定します
enabled
フィルタを実行するか指定します。有効にする場合「1」または「true」、無効にする場合は「0」または「false」を指定。

※StartX,StartY,FinishX,FinishYはStyle=1の時に有効となる。また、これらはそれぞれの要素の幅、あるいは高さの割合で指定。

使用した時の例

.sample1 img{
  filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=0, Style=2,);
}
.sample2 img{
  filter:alpha(Opacity=100, FinishOpacity=0, Style=2,);
}	
<p>フィルタを適用していない画像<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample1">sample1を適用した画像。Alpha(Opacity=100, FinishOpacity=0, Style=2,)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample2">sample2を適用した画像。alpha(Opacity=100, FinishOpacity=0, Style=2,)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>

ブラウザ上の表示例

フィルタを適用していない画像

sample1を適用した画像。Alpha(Opacity=100, FinishOpacity=0, Style=2,)

sample2を適用した画像。alpha(Opacity=100, FinishOpacity=0, Style=2,)

対応ブラウザなどのデータ

プロパティ 独自拡張
対応ブラウザ Internet Explorer4~
※IE10以降は未対応

関連情報