いまさらですが、opacityについて

ふとCSSのことを考えてて、「そういえば、opacityってどのブラウザでもいけたんだっけ？」と思いいろいろやってみたので、自分用にメモ。


opacityとは、透明度の指定をすること。
画像をhoverしたときに、なんとなく光った感じにしたいときは、
背景白の場合において、opacityを８０％くらいに設定するとそれっぽくなる。

opacity自体はCSS2のプロパティなので、基本的にブラウザは対応している。ただし、案の定IEは対応できていない。そのときは、filterを使う。つまり、主要ブラウザでopacityを表現するときのコードは以下のとおり。

※imgタグをマウスオーバーしたときに、透明度８０％に指定する場合
img:hover{
    opacity:0.8;
    filter:alpha(opacity=80);
}

filter:alpha(opacity=80)の部分がIE用。この書き方の場合は、％の値となる。

ilterは、IE用だから、CSSの整理のためにも、もしかしたら、ハック側のCSSに記載しておくといいかもしれない。ま、一行くらい同時に書き込んでも問題はないだろうけど、個人的には分けたほうが都合がいいかな...とも思う。

記事の中には、firefox対応のopacityはプレフィックスの-moz-をつけるという記述もあるけど、俺のテストしてみた限り、普通に書いても大丈夫だった。

また、このプロパティを使用すると、ちょっとIEではもたつくかな？といった感じをうけた。
最近のでいえば、GoogleChromeでも対応している。（ま、そうだろうけど）