【IE8対応】PIEを使った透明背景

テクニック,
Pocket

IE6~9にCSS3を反映させるため、 PIE http://css3pie.com/ を利用されている方も多いのではないでしょうか。

今回はそのPIEを用いて透過する背景(色)の設定方法をご紹介します。
ドロップシャドウと併用できないデメリットがありますが、デザイン上、特に問題なければお試しください。

ポイント1: background-color 指定は rgba方式

主要ブラウザに向けて、backgroud-color は rgba方式を用いて透過する背景色を指定します。
rgba方式はIE8以下では無効なため、IE8以下には背景色は反映されません。

background-color: rgba(0,0,0,0.6) ;

ポイント2: box-shadow で透過したい背景色を指定

PIEで実現できるCSS3のタグは次の3つです。

  • border-radius (角丸)
  • box-shadow (box 要素のドロップシャドウ)
  • linear-gradient (背景色のグラデーション)

透過背景の指定にbox-shadowを用います。
box-shadowの色指定はrgba方式のままで大丈夫です。

/* IE10以下 */
 box-shadow: 0 0 rgba(0,0,0,0.6)  \9;

※最後の \9 は、IE10 以下にのみ反映されるCSSハックです。

今回のポイントはズバリここです。
従来box-shadowは背景色の指定がないと描画されないのですが、PIEが独自にbox-shawodの描画を再現するため、背景色の指定が無いにもかかわらず透過するbox-shawodが表示されます。
これが透過背景が実現できる結果ということになります。

 ポイント3: CSSハック :not(:target) でIE9以上を上書き

IE8のみで透過背景となればいいので、ポイント2のbox-shadow指定はIE9以上では不要となります。
今回は、:not(:target) を用いたCSSハックでIE9以上のbox-shadowを無効化します。

/* iE9以上 */
 セレクタ:not(:target) { box-shadow:none; }

まとめ: IE8以下で box-shadow の透過色が反映

以上の指定をすることでIE8では次のことが起こります。

  • 背景色が表示されない。
  • でも、box-shadowは透過色で描画されている。
  • すなわち、透過の背景色が再現できている!