透過pngテスト
この記事は2010/10/12に公開され2012/01/09に更新、619回読まれました。
背景画像
人物画像(元)
人物画像(切り抜き)
Divに背景画像を指定し、人物画像(切り抜き)を配置したもの

Divに背景画像を指定し、人物画像(切り抜き)を配置しclassにiepngfixを指定したもの

IE7以下では透過pngを正しく扱えないため、js、htc等を使用しなければなりません。
ここではiepingfix.htcを使用しています。
htcは絶対パスで読み込まないと正しく動作しないため、WordPressではヘッダファイル(header.php)にスタイル指定しています。
- <style type=”text/css”>
- <!–
- .iepngfix {
- behavior: url(“<?php bloginfo(‘template_url’); ?>/iepngfix.htc”);
- }
- –>
- </style>
CSSファイルで指定しないのは、<?php bloginfo(‘template_url’); ?>を決め打ちしなければならなくなるためです。
なお、こちらで入手できるiepngfix.htcはblank.gifの読み込みに問題が発生するようです。
各人、blank.gif(1px×1pxの透明GIF)を用意してください。
上記対策では、透明GIFをサイト毎に書き換えなければなりません。
これは面倒なので、iepngfix.htcを修正しました。
修正箇所は14行目の
- var blankImg = ‘http://www.isella.com/aod2/images/blank.gif’;
です。これを
- var str = document.URLUnencoded ;
- var blankImg = str.replace(/(.*\/).*/,”$1″) + “blank.gif” ;
とします。
何をやっているかというと、
- iepngfix.htcへのURLを取得してstrに代入。
- strから正規表現とreplace関数を使ってファイル名を取り除き、blank.gifを連結。
strに当該ファイルのURLを入れて・・というところまでは最初から思いついたのですが、
- var str = location.href ;
とやると、うまく動作しません。
これはHTC内のJavaScriptのクセというか方言のようなものなのかしら?
ここで解決方法を見つけました。
当然、iepngfix.htcと同じディレクトリにblank.gifを設置してください。