背景をグラデーションする１

100万ポイント山分け！1日5回検索で1ポイントもらえる

259667

HOME | DIARY | PROFILE

【フォローする】【ログイン】

背景をグラデーションする１

ｩ 背景をヨコにグラデーション ｩ

今回は
『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』の場合】

【『style=2』の場合】

【『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>

template- yamato

ジャンル別一覧