ieで透ける

前回に引き続き, ieでalphaチャンネル付きPNGを表示させる(ように見せる)方法.今回は, blogでよくあるデザインで「Entryの背景を半透明にする」です.どんなものかは, サンプルを見た方が早いでしょう.

■ ieで透けるサンプル

ポイント…といってに大してないです. Entry部分のstyle sheetは以下のようになってます.

.blogbody { filter: alpha(opacity=90, style=0); background-color: transparet; background-image: url("alpha_back.png");

background-で始まる2行でblogbodyの背景にalphaチャンネル付きのPNGを張って,透けさせています. ただ, これではieで透けないのでfilter:alphaでblogbody自体の不透明度を90%にしています. ie以外ではfilter:alphaは解釈できないので無視されます.

注意すべき点は2点. 1つはblogbody全体が透けるので, 文字やimageも透けます.なので不透明度を下げすぎると文字まで見えなくなります.

もう一つは, ieの場合alphaチャンネル付のPNGを表示させると, alphaチャンネル付きの箇所が水色になってしまう. これはブラウザ見てcss切り替える等の事をする必要があると思います.