リンク画像をロールオーバーさせる時など、要素を半透明にする場合はCSS の opacity
プロパティを利用すれば動きます。
CSS3 からは opacity
1つで、モダンブラウザはほぼ動くようになったみたいですが、
IE6で動かない。。。
もうお決まりですね!!!
その場合は opacity
と合わせて filter
プロパティも同時に利用することで、IE6 でも透過が効くようにしてあげます。
CSS で画像をロールオーバーする際の透過指定
だいたいこんな感じです。
1 2 3 |
a:hover img { opacity:0.50; } |
filter: を利用してIE6 対応
IE6 でも動くようにfilter
も合わせて使います。ついでに、Firefox やNetscape 用の
-moz-opacity
も使いました。これでほぼどのブラウザでも見えるようになります。
1 2 3 4 5 |
a:hover img { filter: alpha(opacity=50); /*IE下位バージョン用*/ -moz-opacity:0.50; /*Firefox、Netscape用*/ opacity:0.50; /*Safari、Chrome、Opera、IE9用*/ } |
ただし「透過画像」が絡んでくると、これがまたIE下位バージョン では正常に動いてくれません > <;
コメント