さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

IE6で透過PNGを表示させる方法(背景リピート)

Pocket
LINEで送る

以前にIE6で透過PNGを表示させる方法をご紹介しましたが、以前紹介した方法だと背景画像でリピート表示することが出来ない為、今回はリピート表示させられる方法をご紹介します。

以下のようにCSSを記述します。
※「.bg」は背景画像を表示させるクラスです。

div.bg{
      background:url(img/bg.png) repeat-y;
 }
 
* html div.bg{
       behavior: expression(
       this.style.behavior || (
       this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
       this.style.backgroundImage = "none",
       this.style.behavior = "none"
 )
 );
 }

【注意】
上記コードを入れると、CSSでfloatを設定した要素の子要素のaやonclickが無効になってしまい、テキスト選択すら出来なくなってしまいます。
対処法は、floatが設定されている要素の親要素のスタイルに「position:relative;」を設定してあげると解消されます。

※上記コードは以下のサイトを参考にしています。

カテゴリー:HP制作, css

コメントを残す

コメント内容