ie6で背景画像に透過pngを表示させる「DD_belatedPNG.js」

0

    ie6でも透過pngを表示できるオススメスクリプト「DD_belatedPNG.js」を紹介したいと思います。

    透過pngを表示させるやつはいろいろあると思いますが、とりあえず今はこれを使っておけば間違いないんじゃないでしょうか。


    ご存知の通りie6では、透過pngがきれいに表示されません。
    特に背景画像で使おうものなら、問題おきまくりです。
    そこで超便利なのが、「DD_belatedPNG.js」というスクリプトです。
    何がすごいか信用できない人は、他のスクリプトや対応策などググれば出てくるので色々使ってみて下さい。

    これさえあればie6への憎しみも少しは和いでくれると思います。


    ダウンロード

    ダウンロードのやり方がちょっとややこしいので書いておきます。


    このページに、DD_belatedPNG0.0〜releaseと左側のどっかに書いてあるので、見つけたら記事本文のリンクをクリックします。

    そうすると、ちょっと上かちょっと下にdownloadのボタンが2つあるので(どっちでもいい)クリックします。

    表示されたソースを「DD_belatedPNG.js」という名前で保存して下さい。
    これで準備は完了です。


    使用方法

    まず、head内に下のコードを書きます。
    <!--[if IE 6]>
    <script src="○○○/DD_belatedPNG.js"></script>
    <script>
    DD_belatedPNG.fix('img, .png_bg');
    </script>
    <![endif]-->
    
    大事なのは、4行目のカッコの中です。
    ここでは、imgすべてとclassをpng_bgで指定している背景画像に適用されるようになってます。

    ちゃんとpng画像だけを見つけてきてくれるので、jpgやgifなんかはスルーしてくれます。
    使いたいところだけにclass指定して、カッコに書いてももちろん使えます。


    背景画像に使う

    DD_belatedPNGが一番輝きを放つのが背景に透過pngを使う時です。
    <div id="hope" class="png_bg">
    <p>君は僕の心の雨雲を晴らしてくれる太陽のような存在だ</p>
    </div>
    

    #hope {background:url(bg.png) repeat left top;}
    

    これだけで背景画像に透過pngを使用できます。

    注意しないといけないのが、body,tr,tdの背景には使えないということです。
    ページ全体の背景に使いたい時は、全体を#wrapperなどで囲んで使います。
    あと、background-position:fixed;には対応していませんので注意しましょう。


    まとめ

    DD_belatedPNGでは背景画像がリピートしなくなったり、重くなったり、リンクがおかしくなったりというよくある問題も起きません。
    よけいなファイルもいらないですし、ie6で透過png使う時はこれで間違いないと思います。


    ++++++++++++++++++++++++++++++++++++++++++++++++++

    有限会社アンブレラ STUDIO TEMPO
    〒530-0056 大阪市北区兎我野町5-6 栄ビル201
    TEL/FAX:06-6367-4413/06-6367-4414

    ++++++++++++++++++++++++++++++++++++++++++++++++++
           
    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック

    カレンダー

    S M T W T F S
          1
    2345678
    9101112131415
    16171819202122
    23242526272829
    3031     
    << December 2018 >>

    エントリー

    カテゴリー

    アーカイブ

    recent comment

    リンク

    プロフィール

    検索

    その他

    モバイル

    qrcode