CSSで画像を透過させる方法 filter,-moz-opacity,opacity

Posted: 2009.10.1

CSSを使って画像を透過させると、スワップイメージの時などにわざわざ透過した状態の画像などを用意しなくて済むので便利です。


■画像部分
<div class="sample"><a href="/"><img src="http://www.and-nbsp.com/images/IconSmiley.jpg" /></a></div>

■CSS
.sample a:hover img{
filter: alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}

それぞれ
filterがIE用
-moz-opacityがFirefox用
opacityがSafari,Opera用
となります。
「50」,「0.5」の値を変えれば透過の度合いを変えられます。

スワップイメージ以外にも利用できそうですね。


代表ブログ MovableTypeカスタマイズ ECCUBEカスタマイズ ホームページ制作の下請け
WordPressカスタマイズ