Category
タグ一覧
半透明フィルタ Microsoft.AlphaImageLoader 2
2006年8月29日 15:45
こちらのエントリで紹介したIEのフィルターを設定した<div>～</div>内に、<a>があるとリンクをクリックできません。テキスト文字だけの場合は問題ないのですが。
勝手な解釈ですが、progid:DXImageTransform.Microsoft.AlphaImageLoaderは<img>の用に画像を読み込むのであって、背景画像として読み込むの出はないような気がします。（Microsoftの解説読めばわかるのでしょうが・・・）そのため、テキスト文字だけの場合は、見た目では問題ないのですが、<a>が入ると不具合が実体化して出てくるのではないのかと。
そこで、テキスト文字等の入るブロックレベルもしくはインラインレベルの下に、背景のブロックレベル要素を作ってあげれば良いのではないのでしょうか。
HTML
<div id="beta"> <div id="gamma"><a href="#">ここが半透明。ここが半透明。</a></div> <div id="alpha"></div> </div>
CSS
body { background-image:url(bg.gif); }
span#beta {
width:250px;
height:291px;
position:relative;
}
body > div#beta { background:url(alpha_bg.png) 0 0 no-repeat; }
div#alpha {
position:absolute;
top:0px;
z-index:1;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=alpha_bg.png);
width:250px;
height:291px;
}
body > div#alpha { display:none; }
div#gamma {
position:relative;
z-index:2;
}