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%の場合:
IE7,8で背景を透過させる方法 | CREAMU
255 ÷ 100 x 50 = 127.5
10進数で127か128なので、16進数だと7Fか80になります。
「#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がお空のお星様になりますようにっ☆