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は透過色で描画されている。
• すなわち、透過の背景色が再現できている！