SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【CSS】背景に半透明を使いたい(png画像使用とIE6対策)

背景の半透明がしたい という話題です。

FirefoxでもIE8でもIE7でもIE6でも、背景の半透明をしたい

FirefoxでもIE8でもIE7でもIE6でも、背景の半透明をしたい

png画像の透明、半透明に、IE6は対応していません(IE7以降は大丈夫のようです)。

さてどうしましょうか。

答え

適用するのは、IE独自のフィルタのGradient。

例えば、「背景色白で、透明度40%」などが指定できる。「#66ffffff」など指定している箇所がそれで、8桁あるのは#AARRGGBB(AAは透明度)形式だから。

まずはIE6を考えずにPNG画像を背景画像に使ったスタイルシートを書き、条件分岐コメントで、後からIE6にだけ適用するスタイルシートを読み込み、上書きする。

<!--[if IE 6]>
<style type="text/css">
#targetElement {
	filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#66ffffff,endColorStr=#66ffffff);
}
</style>
<![endif]-->

別ファイルに書き出してもよい。

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iestyle.css" />
<![endif]-->

IEのフィルタのalpha()も半透明だが、こちらはスタイルシートのopacityと同様。指定した要素の子がみんな半透明になり、背景だけが半透明になるといった都合のよいことはできない。

関連するメモ

コメント