背景をグラデーションする 1
ゥ背景をヨコにグラデーションゥ
今回は
『filter: alpha(opacity=100,finishopacity=30,style=1);』
をつかいます♪
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #枠の色;background-color:#背景色;filter:alpha(opacity=100,finishopacity=30,style=1);">ここに文章<tr><td></td></tr></table> |
『opacity=100』の部分は、
背景自体の透明度を設定します。
(数字が小さいほど、背景が透明になります)
【『opacity=50』の場合】
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #枠の色;background-color:#背景色;filter:alpha(opacity=50,finishopacity=30,style=1);">ここに文章<tr><td></td></tr></table> |
『finishopacity=30』の部分は
グラデーションの度合いを設定します。
(数字が小さいほど、グラデーションの割合が大きくなります)
【『finishopacity=70』の場合】
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #枠の色;background-color:#背景色;filter:alpha(opacity=100,finishopacity=70,style=1);">ここに文章<tr><td></td></tr></table> |
【『finishopacity=10』の場合】
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #枠の色;background-color:#背景色;filter:alpha(opacity=100,finishopacity=10,style=1);">ここに文章<tr><td></td></tr></table> |
『style=1』の部分は、
グラデーションのパターンを設定します。
(style=1かstyle=2)
【『style=1』の場合】
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #枠の色;background-color:#背景色;filter:alpha(opacity=100,finishopacity=30,style=1);">ここに文章<tr><td></td></tr></table> |
【『style=2』の場合】
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #枠の色;background-color:#背景色;filter:alpha(opacity=100,finishopacity=30,style=2);">ここに文章<tr><td></td></tr></table> |
【『td』にも設定できます】
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #枠の色;"><tr><td width="100%" height="30%" style="background-color:#背景色;filter:alpha(opacity=100,finishopacity=30,style=1);">ここに文章</td></tr><tr><td width="100%" height="70%">ここに文章</td></tr></table> |
|