- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：[css] a:hoverの背景画像に半透明PNGを使いたい）
[css] a:hoverの背景画像に半透明PNGを使いたい
このQ&Aのポイント
- IE6で、a:hoverの背景画像に半透明PNGを表示する方法が分からず、困っています。画像Ａ（normal.jpg）にマウスオーバーすると透明度15%白色の画像がかかり、少し白っぽくなるようにしたいです。
- 背景にnormal.jpgを指定し、a:hoverで半透明PNGがかぶさるようにしましたが、IEではうまく表示されません。AlphaImageLoaderを使用してもダメで、ブロック要素にしか効かないようです。
- 解決策を教えていただけませんか？画像Ａと画像Ｂを縦長につなげてhoverでズラす方法は使わず、別の方法を模索しています。
- asummer
- お礼率74% (52/70)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 半透明PNGもAlphaImageLoaderも使用したことが無いので詳細は分からないのですが・・・こういう感じのものをしたいということですか？ <style type="text/css"><!-- .trans{ position:relative; width:100px; height:100px; } a { background-image:url("sample1.gif"); background-repeat:no-repeat; display:block; width:100px; height:100px; position:absolute; top:0px; left:0px; } a:hover { opacity:0.5; } span { position:absolute; top:0px; left:0px; color:red; } --></style> <!--[if IE]> <style type="text/css"><!-- a:hover { filter:alpha(opacity=50); } --></style> <![endif]--> <div class="trans"> <a href=""></a> <span>あああ</span> </div> ※透明度の設定が100％表示の内の15％なのか85％なのか分からなかったのでとりあえず50％にしてます opacity:0.5; filter:alpha(opacity=50); ※ダミースペースとなる .trans が必要なのでインライン上ではwidth:height:が取れない為使いにくいですが・・・
お礼
うわあ、ありがとうございます！ そう、そういう感じのことをしたかったのです！ 教えていただいた、透明度の設定を使って、できました！！ こんな感じにしました。 ベースの画像は、htmlに<img>で大丈夫でした（本当はそうしたかったのです） 超ありがとうございましたーー #trans a { display: block; width:100px; height:100px; background: none; } #trans a:hover { background: url(img/white.jpg) 0 0 no-repeat; opacity:0.85; } * html #trans a:hover { filter:alpha(opacity=85); }