画像の透過とグラデーション（ＩＥのみ）
■ 画像の透過とグラデーション（ＩＥのみ）
★ filter:alpha を使った透過（記事を書くときもＩＥで行うこと）
◦ 画像 ２２０ｐｘ １６５ｐｘ でテスト
● 画像透過
<img src="画像のURL" style="filter:alpha(opacity=50)">
opacity ・・・・・ 開始透明度
0 （透明） ～ 100(不透明）
★ Firefox・Netscape・Opera・Safari も対応する場合は、下記の様にします（;opacity:0.5;)
(1.0・・・100 0.5・・・・50 の様に表します)
<img src="画像のURL" style="filter:alpha(opacity=50);opacity:0.5;">
◦ Opera・Safari
opacity:透明度;
◦ Firefox・Netscape
-moz-opacity:.透明度;
以下は、Firefox・Netscape・Opera・Safari 対応で記述します。
（例）
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(opacity=10);opacity:0.1;">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(opacity=20);opacity:0.2;">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(opacity=30);opacity:0.3;">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(opacity=40);opacity:0.4;">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(opacity=50);opacity:0.5;">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(opacity=60);opacity:0.6;">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(opacity=70);opacity:0.7;">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(opacity=80);opacity:0.8;">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(opacity=90);opacity:0.9;">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(opacity=100);opacity:1.0;">
（結果）
● 画像円形グラデーション
<img src="画像のURL" style="filter:alpha(style=2,opacity=100,finishopacity=0)">
style ・・・・・
グラデーション
1 線形
2 円形
3 長方形（方形）
opacity ・・・・・ 開始透明度
0 （透明） ～ 100(不透明）
finishopacity ・・・・・ 終了 透明度
0 （透明） ～ 100(不透明）
★ Firefox・Netscape・Opera・Safari も対応する場合については調査中（できないかも）
（例）
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(style=2,opacity=100,finishopacity=0)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(style=2,opacity=100,finishopacity=10)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(style=2,opacity=100,finishopacity=20)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(style=2,opacity=100,finishopacity=30)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(style=2,opacity=100,finishopacity=40)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(style=2,opacity=100,finishopacity=50)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(style=2,opacity=100,finishopacity=60)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(style=2,opacity=100,finishopacity=70)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(style=2,opacity=100,finishopacity=80)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(style=2,opacity=100,finishopacity=90)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg" style="filter:alpha(style=2,opacity=100,finishopacity=100)">
（結果）
（例）
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg " style="filter:alpha(style=2,opacity=0,finishopacity=100)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=2,opacity=10,finishopacity=100)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=2,opacity=20,finishopacity=100)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=2,opacity=30,finishopacity=100)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=2,opacity=40,finishopacity=100)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=2,opacity=50,finishopacity=100)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=2,opacity=60,finishopacity=100)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=2,opacity=70,finishopacity=100)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=2,opacity=80,finishopacity=100)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=2,opacity=90,finishopacity=100)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=2,opacity=100,finishopacity=100)">
（結果）
● 画像線形グラデーション
<img src="画像のURL" style="filter:alpha(style=1,opacity=100,finishopacity=0)">
style ・・・・・
グラデーション
1 線形
2 円形
3 長方形（方形）
opacity ・・・・・ 開始透明度
0 （透明） ～ 100(不透明）
finishopacity ・・・・・ 終了 透明度
0 （透明） ～ 100(不透明）
startx ・・・・・・・ 開始位置 Ｘ座標
starty ・・・・・・・ 開始位置 Ｙ座標
finishx ・・・・・・・ 終了位置 Ｘ座標
finishy ・・・・・・・ 終了位置 Ｙ座標
★ Firefox・Netscape・Opera・Safari も対応する場合については調査中（できないかも）
（例）
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter: alpha(style=1, opacity=0, finishopacity=100);"> <img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter: alpha(style=1, opacity=100, finishopacity=10);">
（結果）
（例）
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg " style="filter: alpha(style=1, opacity=100, finishopacity=0, startx=110, starty=83, finishx=220, finishy=165);">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg " style="filter: alpha(style=1, opacity=100, finishopacity=0, startx=110, starty=83, finishx=0, finishy=0);">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg " style="filter: alpha(style=1, opacity=100, finishopacity=0, startx=220, starty=165, finishx=110, finishy=83);">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg " style="filter: alpha(style=1, opacity=100, finishopacity=0, startx=0, starty=0, finishx=110, finishy=83);">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg " style="filter: alpha(style=1, opacity=100, finishopacity=0, startx=0, starty=0, finishx=220, finishy=165);">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter: alpha(style=1, opacity=100, finishopacity=0, startx=0, starty=83, finishx=220, finishy=165);">
● 画像方形グラデーション
<img src="画像のURL" style="filter:alpha(style=3,opacity=100,finishopacity=0)">
style ・・・・・
グラデーション
1 線形
2 円形
3 長方形（方形）
opacity ・・・・・ 開始透明度
0 （透明） ～ 100(不透明）
finishopacity ・・・・・ 終了 透明度
0 （透明） ～ 100(不透明）
★ Firefox・Netscape・Opera・Safari も対応する場合については調査中（できないかも）
（例）
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=3,opacity=100,finishopacity=0)"> <img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=3,opacity=100,finishopacity=10)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=3,opacity=100,finishopacity=20)"> <img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=3,opacity=100,finishopacity=30)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=3,opacity=100,finishopacity=40)"> <img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=3,opacity=100,finishopacity=50)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=3,opacity=100,finishopacity=60)"> <img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=3,opacity=100,finishopacity=70)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=3,opacity=100,finishopacity=80)"> <img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=3,opacity=100,finishopacity=90)">
<img src="http://stat.ameba.jp/user_images/20100222/01/new-bulue9/b5/c3/j/t02200165_0800060010424134419.jpg
" style="filter:alpha(style=3,opacity=100,finishopacity=100)">
（結果）