IE7、8でもbackground-colorを透過したい＋α

やっつけですが…
こんな感じのデザイン

• 背景は写真
• その上に透過した背景のボックスを置く
• 上ボックスの下部は矢印形になってて、下ボックスの上に重ねたい
• 上ボックスの背景は透過png、下ボックスの背景はcssのみ

をやりたくて、IE7、IE8の対応も必要な場合。

まずは、

#box1 {
	width: 800px;
	background: url(背景画像のurl) no-repeat 0 0;
	z-index: 2;
}
#box2 {
	width: 800px;
	background: rgba(255,255,255,0.5);
	z-index: 1;
	margin-top: -20px;
}

といったcssになるんですが、これだとIE7、IE8では背景が出ないので filter を使用します。
rgba()とfilterで背景だけを透過させる。 | かえラボBlog
IE7,8で背景を透過させる方法 | CREAMU
IE8とIE9できれいに透過を適応させるCSS
（参考にさせていただきましたありがとうございますm(__)m）

#box1 {
	width: 800px;
	background: url(背景画像のurl) no-repeat 0 0;
	z-index: 2;
}
#box2 {
	width: 800px;
	background: rgba(255,255,255,0.5);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#80FFFFFF,EndColorStr=#80FFFFFF);　/* IE7以下 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#80FFFFFF,EndColorStr=#80FFFFFF)";　/* IE8以上 */
	z-index: 1;
	margin-top: -20px;
}
/* IE9にfilterがかからないように */
#box2:not(:target){
	filter: none;
	-ms-filter: none;
}

こんな感じになりました。

startColorstrとendColorstrの指定ですが、今回は白背景（#FFF）を50％にしたいので…

50%の場合：
255 ÷ 100 x 50 = 127.5
10進数で127か128なので、16進数だと7Fか80になります。

IE7,8で背景を透過させる方法 | CREAMU

「#80FFFFFF」となります。
（自分は最初、「16 ÷ 100 x 50 = 8」…だからなんか「88」とかでいいかな？みたいな超アバウトな計算をしてました…(´ω`) ）

これで完成かな？と思ったら、どうもIE7、IE8でだけ下ボックス（box2）のほうが前面に出てしまうではないですか。z-index 指定してるのにむむむ。

こちらを拝見してたところ、
IEでz-indexの解釈違うのはわかったけど。 - 主に技術的なことを書くブログ（はてブロ版）
どうも上ボックス（box1）に「position: relative」を指定してないせい？かもしれないと思って追加。

#box1 {
	width: 800px;
	background: url(背景画像のurl) no-repeat 0 0;
	z-index: 2;
	position: relative;
}
#box2 {
	width: 800px;
	background: rgba(255,255,255,0.5);
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#80FFFFFF,EndColorStr=#80FFFFFF);　/* IE7以下 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#80FFFFFF,EndColorStr=#80FFFFFF)";　/* IE8以上 */
	z-index: 1;
	margin-top: -20px;
}
/* IE9にfilterがかからないように */
#box2:not(:target){
	filter: none;
	-ms-filter: none;
}

というわけでこちらが完成形。
無事、上ボックスが前面に来て下ボックスもキレイに透過されました。

はやくIE7と8がお空のお星様になりますようにっ☆