【IE対策】IE8以下で背景画像を透過させる | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

メモを整理してたら、IE8以下で背景画像を透過対応したときのメモが出てきました。
そういえば何かのサイトをコーディングしたときに調べたような気がしますが覚えていないですね。
また何かの時に役立つかもしれないので、備忘録に残しておこうかと思います。

条件付きコメントをつかってIE9以下のときのみフィルターを使うように設定してあげれはよいかと思います。

.lt-ie9 #contents01 .intro-title {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/contents_ttl01.png,sizingMethod='crop');
  }

過去の自分はjQueryで対応する方法も調べてたみたいですね。

$(function() {
    if(navigator.userAgent.indexOf("MSIE") != -1) {
      $('img').each(function() {
        if($(this).attr('src').indexOf('.png') != -1) {
          $(this).css({
            'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +
            $(this).attr('src') +
            '", sizingMethod="scale");'
          });
        }
      });
    }
  });