透過PNGを背景に使う

HTML CSS

winIEでの問題点

ページ全面に透過PNGを敷くページを作ってたのですが、IE用にfilterプロパティで背景を擬似的に使うと

  • 子要素のリンクが効かない
  • フォームもサブミットできない
  • テキストの選択もできない

なんて愉快すぎる。アンチインタラクティブか。

回避策

試行錯誤の検証結果

  1. テキストを乗せるボックスに"position:relative"を指定
  2. テキストの要素に"position:absolute"を指定

もしくは

  1. テキストを乗せるボックスに"position:relative"を指定
  2. テキストを乗せるボックスに"background"で背景画像を指定

でメデタク回避。
最近ワガママなIEのせいで時間使いまくってるぜ。なめんな

実際にはこんな感じで回避

<div id="area">
<div id="box">
<p>テスト</p>
</div>
</div>
div#area {
background: url("../img/bg.png");
_background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/bg.png", sizingMethod="scale");
}
div#box {
position: relative;
background: url("../img/dummy.gif");
}
div#box p {
position: absolute;
}