画像のボタンをロールオーバーで変化させる時は２つボタンをつくる必要がありますが、このCSSならボタンは１つで足りてしまいます。
画像の輝度を上げる
■html
<a href="http://blog.webcreativepark.net">
<img src="./tor.gif" alt="to-R"/>
</a>
■css
a:hover img{
opacity:0.8;
filter: alpha(opacity=80);
}
ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。
IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。
IE・Firefox・Opera・Netscape・Safari対応
CSS Opacity設定
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
■IE
alpha(opacity=透明度);
100が100％となる。25％の場合は、25
■Firefox・Netscape
-moz-opacity:.透明度;
1.0が100％となる。25％の場合は、.25
■Opera・Safari
opacity:透明度;
1.0が100％となる。25％の場合は、.25
CSS3.0からは、opacity:透明度;の設定ですべてのブラウザで表示可能になるらしい。
コメントする