※ 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でズラす方法は使わず、別の方法を模索しています。
[css] a:hoverの背景画像に半透明PNGを使いたい
いつもありがとうございます。
IE6で、a:hoverの背景画像に半透明PNGを表示する方法が分からず、困っています。
そもそものやりたいことは、
【画像Ａ（normal.jpg）にマウスオーバーすると、（透明度15%白色の画像がかかり）少し白っぽくなる】
です。画像Ａにはリンクを張ります。
下記のように、背景にnormal.jpgを指定し、a:hoverで半透明PNGがかぶさるようにしました。
firefoxなどではうまく行きました。
IE用に、AlphaImageLoaderを使ったのですが、ダメです。（効いてない時と同じ、薄い青グレーになります）
ブロック要素にしかダメらしいので、くどくdisplay:blockを使ったのですが…
どなたか解決策、教えていただけませんか！！？？
※画像Ａと、画像Ａに白みがかった画像Ｂをつなげて縦長にして、
hoverでズラす方法は、無しでお願いします。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
background: transparent;
}
#trans {
width: 100px;
height: 100px;
background: url(img/normal.jpg) 0 0 no-repeat;
}
#trans a {
display: block;
width:100px;
height:100px;
background: none;
}
#trans a:hover {
background: url(img/trans.png) 0 0 no-repeat;
}
* html #trans a:hover {
display: block;
width:100px;
height:100px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/trans.png', sizingMethod='scale');
}
</style>
</head>
<body>
<div id="trans">
<a href="#">あああ</a>
</div>
</body>
</html>
お礼
うわあ、ありがとうございます！ そう、そういう感じのことをしたかったのです！ 教えていただいた、透明度の設定を使って、できました！！ こんな感じにしました。 ベースの画像は、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); }