前回は、IMG要素(タグ)を VMLレンダラで 半透明、透過PNGを表示する を行いました。
今回は、背景として半透明PNGを使用する方法を試してみます。
注意していただきたいのは、このページの方法はあくまで代用であって、W3Cの勧告にしたがう標準準拠ブラウザでは、なんら意味を持たない事、全く同じ挙動を期待してはならないと言う事です。
このページの情報に関するご意見、ご質問等がありましたら 掲示板までどうぞ。
この文章を囲んでいるDIV背景BOXは、BODY背景に対して透けています。
本来のスタイルシート指定をした後に、条件コメント内で、VML宣言、スタイルシート指定(正規の背景画像とマージンを消す、VMLのマージンと幅を加える)、
<vml:roundrect />でボックスを作り、<v:fill />で背景塗りつぶしを行います。
このページサンプルで使っているvml:roundrectや、vml:rect要素には、width(幅)指定が必須です。省略時に勝手に幅を補う親切さはブラウザ(IE)にはありません。
vmlに指定するwidthは、100%で指定しないほうが良いです。
何故ならば、横スクロールバーが出現してしまいます。
そのため、ボーダー(strokeweight属性)の値に影響されてしまい幅を小さくして調整する考慮をしなければなりません。
VML shape 要素同士(例えば vml:imageを含むネスト)は、インラインでの重ね併せは出来ません。
重ねる場合は、 position: absolute; z-index: による方法で行ってください。
これらのページサンプル方法は、background-repeat: repeat; background-attachment: scroll; background-position top top;等の規定値動作のみを想定しています。
この記事の表示サンプルは、右記のリンクより保存出来ます。→ urawaza05-samp1.lzh lzh 1.54 KB
実際の表示は表示サンプルページでご覧ください、ブラウザの背景に対してPNGが透けています。
これらのページサンプル方法は、background-repeat: repeat; background-attachment: scroll; background-position top top;等の規定値動作のみを想定しています。
この記事の表示サンプルは、右記のリンクより保存出来ます。→ urawaza05-samp2.lzh lzh 9.1 KB
IE 5 及び 5.5 (5.50.4133.200)の vgx.dll(Microsoft Vector Graphics Rendering(VML))は、Beta バージョンですから 半透明系は、ディザリングで 擬似透過表示されます。
IE 6 付属の vgx.dll(6.00.2800.1106)では、正しい表示となります。
今回の v:ackground による背景塗りつぶしは、透明系が無視されますので、IE 6 以降でしか半透過表示されません。
IE 6.0 の 標準準拠モード VML要素を動作させる場合は、スタイルでブロック要素として明示するか、floatで廻りこみを指定する必要が有ります。
そのような対策を取らなかった場合、単なる空領域(スペーサー)となって画像が見えません。
IE 6.0のVMLレンダラでのボックスモデル計算法でのブラウザ互換性を取っていない事によって起きるバグな感じです...。
初公開
DIV 要素の背景に透明PNG画像を使う記事の追加
サンプルページ及び、アーカイブ(urawaza05-samp1.lzh)の内容を変更。傍線(border)無しを追加
