ブログ練習帳

filterとopacityを使ってみる１

リンクに画像を使うとき、マウスオーバー画像を別に準備するのって、面倒。ちょっと色を薄くするだけでも、感じはでます。そういう時、hover用に薄い色の画像をもう一枚準備しなくても、CSSのみで色を薄くすることができます。

XHTML

<p id="trans"><a href="#">

<img src="img/btn01.gif" width="100" height="50" alt=""/></a></p>

CSS

#trans a {
	text-decoration:none;
	opacity:1;
}
#trans a img{
	width:100px;
	filter: alpha(opacity=100);
	border:none;
}

#trans a:hover{
	opacity:0.7;
}
#trans a:hover img{
	width:100px;
	filter: alpha(opacity=70);

}

サンプルはこちら

opacityはIEでは対応していないのですが、同じことがIE独自のfilterで実現できます。ただし、このとき、IEにはaでなく、a imgに設定してあげる必要があります。また、filterは適用する要素にwidthかheigthが指定していないとうまくいかないことがあるようなので、きっちり追記です。opactiyは1が不透明で、0がまったくの透明、filterは100が不透明で0がまったくの透明になります。

これって、いろいろ遊べそうな気がするなぁと、わくわくする見習いですぅ。

2011年11月19日1:01 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)