背景画像としてPNGを用いると、WinIEではうまく行かない。
filterを使えるのはWinIE。
これをうまく組み合わせられるかな??
そのテストのためのエントリー。
このBOXはIEの拡張命令で半透明化しているけれど、その場合中の文字も半透明化されてしまう。つまり文字の色自体も薄くなり可読性が落ちるので、アンダースコア(アンダーバー)ハックなどをする必要があるかも?
ちなみにこちらのBOXの背景画像はFireFoxで透過してない!ネスケでも同様に淡色塗りつぶしの背景。これはスタイルをタグの中に直接記入してしまっているから起こっている現象みたい。
こちらのBOXはアンダースコアハックにより、文字色を赤にしたサンプル。FireFoxでは背景が表示されない???これはタグに直接スタイルを書き込んでいるからかな???
ネスケでも同様に表示がおかしくなってしまった。
ということで、こちらのほうではスタイルの記述を外部にしてみたサンプル。その1「class=hantoumei1」
またなぜかFireFoxではしばらくウインドウを最小化した後に再表示すると、背景画像が薄黒くにごる現象があった。念のためFilterもアンダースコアハックしてみる。
結果としてはどうやらPNGの半透明背景画像の再描画部分でエラーがある模様。
「class=hantoumei2」
子BOXpadding:10px + color:#000こちらはBOX(div)を入れ子にしてみたサンプル。どうやらこれでもIEの文字色は薄くなってしまう模様。ちなみにこちらは親BOXでopacity:0.5を指定してみたところ、FireFoxもIE同様に子BOXの文字色まで薄くなった。また半透過PNGが更に薄くなった。ネスケ7.1では影響なし。
「class=hantoumei3」FireFoxではスタイルの記述をhtmlに直接書き込んだ際にアンダースコアを含めてしまうと、そのスタイルすべてが無効になってしまうみたい。とおもったら、BOXのwidth属性はちゃんと効いてるんだよねぇ・・・・。かといってブログの投稿欄では通常改行させると<br>が挿入されてしまうから困ったもの。
こちらは特に幅や高さを指定しないBOXでの表示例。
指定してない状態だと半透過にならない・・・・。
なんにしても、さて、どうしたものか。
「class=hantoumei4」ということで、幅だけを指定してみたら?
「class=hantoumei5」ということで、高さだけを指定してみたら?
まとめ
表示された画像を見て思ったのは、ネスケやFirefoxはPNGの半透過背景画像に対応している。しかし、Firefoxは一度画面から隠れた後に再表示させると、汚くなってしまう場合がある。(半透過せずに黒ずむ)
またIEの
_filter:Alpha(opacity=50); はその中の文字や子要素に対しても影響を及ぼしてしまう。またアンダースコアハック自体推奨されていない。(※アンダースコアハックとは、スタイルの記述の前にアンダースコア・下線・を入れることによって、IE以外がその行を無視してしまう特性を使ったハック)
更には、IEの場合、widthかheightを指定しないと反映されない模様。
また色味で言うと、今回は透過率50%の赤っぽいPNG画像を使用したが、IEでのフィルター使用後の色と、Firefox、ネスケで標準的にサポートする透過PNGの色とでは濃さにかなりの差があった。近似色で言うと、IEで透過させた場合(50%)の色はFirefoxで言うと50%透過PNGを更に
opacity:0.5; と指定して表示された色に近い表示となる。また、opacity:0.5;というスタイルはIE6もネスケ7.1もサポートされず、影響はない。ただ今後のことを考えると -moz- opacity:0.5; というように、Mozilla系限定で適用させてもいいかもしれない。すべてをそろえるなら、同様の-moz-ハックでFirefoxの、アンダースコアハックでIEの背景画像を(少しだけ濃くした色の透過PNGに)変えてしまってもいいかもしれない。
つまり
ネスケ→デフォルトで薄い透過PNG
IE→少しだけ濃い透過PNGをフィルターで薄くする。文字色も濃くする。(実質PNGである必要はないけれど、他のブラウザなどでどうなるかわからないので、一応使用する画像は透過PNGだけにしておきたい)
Firefox→少しだけ濃い透過PNGをopacityで薄くする。文字色も濃くする。頭に-moz-を使う。
あ!単純にIEの透過率を下げればいいのか!
どうやら頭が煮詰まってて灯台下が見えてないみたい・・・。
こんなところでどうだろう?
※テンプレートを変更した際に、今回実験的に作ったcssを破棄してしまって、表示がきちんとされていない可能性もあります。
参考までに今回追加したスタイルシートの内容↓
.hantoumei1{
background-image : url('https://img-cdn.jg.jugem.jp/64d/60049/20060926_255942.png');
background-repeat : repeat;
width:200px;
height:200px;
float : left;
color : #0f0;
_color : #000;
_filter:Alpha(opacity=50);
}
.hantoumei2{
background-image : url('https://img-cdn.jg.jugem.jp/64d/60049/20060926_255942.png');
background-repeat : repeat;
filter:Alpha(opacity=50);
width:200px;
height:200px;
float : left;
opacity:0.5;
_color : #000;
}
.hantoumei3{
background-image : url('https://img-cdn.jg.jugem.jp/64d/60049/20060926_255942.png');
background-repeat : repeat;
color : #022;
_color : #200;
_filter:Alpha(opacity=50);
}
.hantoumei4{
background-image : url('https://img-cdn.jg.jugem.jp/64d/60049/20060926_255942.png');
background-repeat : repeat;
width : 400px;
color : #022;
_color : #200;
_filter:Alpha(opacity=50);
}
.hantoumei5{
background-image : url('https://img-cdn.jg.jugem.jp/64d/60049/20060926_255942.png');
background-repeat : repeat;
height : 25px;
_filter:Alpha(opacity=50);
}