IE 6画像透明
1342 ワード
IE 6は、8ビットのpng透明ピクチャをサポートすることができるが、24ビットのpng透明ピクチャはサポートされない.
(テストした結果、IEでもpng 24の透明性はサポートされておらず、フィルタも必要)
しかし、少し丸くなった画像はpng 8の下に鋸歯があり、とても見苦しいので、仕方なくpng 24を使って解決しなければなりません.
画像の処理には主に2つの状況があります.
1.img画像
jsコード統一処理
ここの1 x 1.gifは透明な画像です
2.背景図(background-image)
cssでの処理
注意:pngバックグラウンドピクチャでは、関連する位置決めはできません.デフォルト:background:url()left topのみです.
もう一つ重要な問題は、このスタイルを使って、中のハイパーリンクなどの内容がクリックできない可能性が高いことです.この問題を解決するには、divをセットすることができます.例えば、このdivのスタイルの名前は:div.conで、それからあげます.con 1つのスタイル:
div.con{position:relative}はすべての問題を解決することができます.
参照ドキュメント:
IE 6の下でcss法でpngピクチャの透明性とpng背景の透明性を解決する方法
(テストした結果、IEでもpng 24の透明性はサポートされておらず、フィルタも必要)
しかし、少し丸くなった画像はpng 8の下に鋸歯があり、とても見苦しいので、仕方なくpng 24を使って解決しなければなりません.
画像の処理には主に2つの状況があります.
1.img画像
jsコード統一処理
var pngImg = $('img.iepngfix');
pngImg.each(function(i, img){
$(img).css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + img.src + '",sizingMethod="noscale");');
img.src = 'http://img.china.alibaba.com/images/common/util/1x1.gif';
});
ここの1 x 1.gifは透明な画像です
2.背景図(background-image)
cssでの処理
background-image:none
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img.china.alibaba.com/cms/upload/2013/715/475/1574517_1451252140.png',sizingMethod='crop')
注意:pngバックグラウンドピクチャでは、関連する位置決めはできません.デフォルト:background:url()left topのみです.
もう一つ重要な問題は、このスタイルを使って、中のハイパーリンクなどの内容がクリックできない可能性が高いことです.この問題を解決するには、divをセットすることができます.例えば、このdivのスタイルの名前は:div.conで、それからあげます.con 1つのスタイル:
div.con{position:relative}はすべての問題を解決することができます.
参照ドキュメント:
IE 6の下でcss法でpngピクチャの透明性とpng背景の透明性を解決する方法