またまた伊藤商店で使用したcssのチップス。
今日は透過PNGの処理。
結構面倒だと思っていたため、今まで避けておりましたが
ちょっとかっちょいいことしたいと思うと避けて通れないため
この機会に学習してみることにした。
safari、firefox、ie7以上では透過PNGはそのまま
利用できるが、IE6はそのままでは使用できない。
今回は背景にPNGを指定してIE6以外のブラウザはそのまま表示させ、
IE6はフィルターを通して画像を表示させるという技。
説明は、cssのみで。
IE6以外のブラウザ
[css]
#header h1 a {
height:30px;
width:130px;
background-image:url(images/logo.png);
background-position:left top;
background-repeat:no-repeat;
text-indent:-9999px;
float:left;
margin:0 30px 0 0;
}
[/css]
IE6のみ読み込み
[css]
/* IE6のみ */
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/path/images/logo.png’, sizingMethod=scale);
/*ファイルはフルパスでした方がいいかも*/
text-indent:inherit;
cursor:hand;
[/css]
ついでに、IE6だけ読み込ませる際のHTMLの処理
HTML内でハックを使わずブラウザの分岐方法
[html]
<!–[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen">
<![endif]–>
[/html]
※IE7未満のブラウザを対象（7含まず）。
ファイルのパスはフルパスで指定しないと表示できなかった。
wordpressのテーマで使用したからかもしれんけど。
また、aタグに書いているのだが、カーソルがそのままだったので、
handを指定した。
具体的に知りたい方は、webdesigningの7月号を参照してちょ。