lowply.github.io/blog

ほとんどのブラウザで背景の半透明化を可能にするCSS指定

hoge

2012/2/22 追記:未だに結構アクセスあるのですが、2006年11月の記事になります。2012年現在はもっと良いソリューションがあるはずなので、それを踏まえて参考にして頂ければと思います。リンクとか切れてるし。

前回のおさらい:

#TB_overlay {
position: absolute;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
**filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;**
}

thickbox.css ですが、

  1. IE独自拡張CSSのfilter:alpha(正式にはActiveXらしい via filter:alphaで大ハマり)を最初に指定
  2. mozilla系独自プロパティ-moz-opacityで透明度を指定
  3. CSS3ドラフト段階のもまで先行実装していて最も正確にCSSをレンダリングするOperaとSafariに向けてopacityプロパティを指定

これで世の中の99%ぐらいのブラウザ上で、半透明効果をかけられるんじゃないでしょうか。肝心なのは指定の順番かな?Validではない順に記述していくことで、長期的に使えるように。

と思ったら、結構知られているテクニックなんですね。。

IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン BLOG

ネタ元では3ページに渡って詳細に実験しています。

Exploring Opacity - Mandarin Design

こちらを読むと、Firefoxではopacityプロパティを認識するようになったらしく、-moz-opacityは後方互換性のために残してあるだけのようです。

おまけ

CSS3はこうなる - GIGAZINE