IE6で透過PNGを表示させる方法いろいろ
ある案件でコーディングする際に色々調べたものです。
ややこしいポジション指定などをした際、背景は透過されますが、そのブロックの中身がくずれるという問題に悩まされました。
結局解決できませんでしたが、透過という点で、様々な方法を知ったので参考にしてください。
■一番有名な、javascriptを使う方法
1. 必要jsファイル【iepngfix.js】をDL → こちらから
2. ヘッダーに以下を記述
<script language=”JavaScript” type=”text/javascript” src=”iepngfix.js”></script>
3. 透過させたい箇所のCSSに以下を追加
* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}
詳しくはこちら
■フィルタを使って透過をする
IEには様々なフィルタを使用することができるので、それを使った透過方法
透過させたいCSS箇所に以下を追加
#overlay { background: transparent url(./overlay.png) no-repeat left top !important; background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizingMethod="scale"); }
詳しくはこちら。
■フィルタを使って半透明にする
こちらもIEのフィルタ機能。画像自体の不透明度を下げるものですが、需要はなさそうです。
透過させたいCSS箇所に以下を追加
.{filter:alpha(opacity=75,style=0)}
opacity=75は不透明度が75％という意味です
■IE6をIE7と同じ表示にしてしまう
Googleが公開しているjsファイルで、IE6の表示をIE7の表示に近づけさせるものがあります。
IE7では透過PNGも表示されるので、こちらを使用すればもちろんIE6でも透過されるというわけですが、
これを使用するのは確実に0に等しいかと思われますが、一応紹介いたします。
1.ヘッダーに以下を記述
<!--[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js" type="text/javascript"></script> <![endif]-->
直リンクＯＫのようです
2.利用したい透過pngに○○-trans.pngという名前をつけることによりcssのbackgroundプロパティで指定した際に透過されて表示されます。
こちらの透過方法はどうやら最初の「iepngfix.js」を使用する方法と同じになるので、
ややこしいポジション指定などをすると崩れます。
以上、参考程度に。
後、透過pngを使用しても結局ブラウザによってアルファチャンネルの認識が違ったりするので、
色味が変わったりと色々悩まされます。 これも解決する方法が見つかりません。
