左上：透明度50%で半透明にする場合
右上：左から右にいくにつれ、透明度が80%～20%と変わります
左下：中心から周りに行くにつれ、放射状に透明度が20%～80%と変わります
右下：中心から周りに行くにつれ、長方形状に透明度が20%～80%と変わります

フィルタは、コンピュータに負担をかけるので、使いすぎないようにしましょう。

サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。

→ Sample：<TABLE>を半透明にする

<TABLE style="filter:Alpha(Opacity=50,FinishOpacity=50,Style=1);">
<TR>
<TD></TD>
</TR>
</TABLE>


<TABLE style="filter:Alpha(Opacity=20,FinishOpacity=80,Style=1);">
<TR>
<TD></TD>
</TR>
</TABLE>


<TABLE style="filter:Alpha(Opacity=80,FinishOpacity=20,Style=2);">
<TR>
<TD></TD>
</TR>
</TABLE>


<TABLE style="filter:Alpha(Opacity=80,FinishOpacity=20,Style=3);">
<TR>
<TD></TD>
</TR>
</TABLE>

解説・注意点など

フィルタを用いて、透明度を設定するには、
style="filter:Alpha(Opacity=50,FinishOpacity=50,Style=1);"
を用います。
Opacityは開始地点の不透明レベル
FinishOpacityは終了地点の不透明レベル
Styleはスタイルの指定。1=線形,2=放射,3=長方形
となります。

← Webデザインテクニックに戻る

eWeb