ホームページ  >  記事  >  ウェブフロントエンド  >  PNG画像とPNG背景を透明にする方法(マルチブラウザ対応)_JavaScriptスキル

PNG画像とPNG背景を透明にする方法(マルチブラウザ対応)_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 18:46:571481ブラウズ

IE6 で PNG の透明な背景をサポートできるようにする JS プログラムもありますが、あまり便利ではありません。CSS を使用することをお勧めします。使用されるのは、IE5.5 の AlphaImageLoader フィルターです。
背景が透明の 1.png
解決策:

コードをコピー コードは次のとおりです

#div1 {
高さ: 600px;
幅: 260px;
背景繰り返し:
}
html> body #div1 {
background-repeat:repeat;background-image:url(bj1.png);
}
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=) true, sizingMethod =scale, src="bj1.png")
}

追加: IE ブラウザーでフィルターを定義するために IE でのみ認識されるワイルドカード文字 (*)
Firefox、Opera PNG 透明画像を完全にサポートするブラウザーはサブセレクターもサポートします (>)
構文:
フィルター: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled, sizingMethod=sSize, src=sURL)
属性:
有効: オプション。ブール値。フィルターがアクティブかどうかを設定または取得します。 true | false
true : デフォルト値。フィルターが有効になりました。
false: フィルターは無効です。
sizingMethod : オプション。弦。フィルタリングされたオブジェクトの画像がオブジェクト コンテナの境界内にどのように表示されるかを設定または取得します。 Crop : オブジェクトの寸法に合わせて画像をトリミングします。
画像: デフォルト値。画像の寸法に合わせてオブジェクトのサイズ境界を増減します。
スケール: オブジェクトのサイズ境界内に収まるように画像をスケールします。
ソース: 必須。弦。絶対または相対 URL アドレスを使用して背景画像を指定します。このパラメータを省略した場合、フィルタは効果がありません。

2.png 画像は透明です
Web ページに直接挿入した png 画像を透明にしたい場合は、次の js コードを全体に直接挿入するだけです。ページを透明にすることができます:

コードをコピーします コードは次のとおりです。 script language="JavaScript"> functionCorrectPNG() // Win IE 5.5 および 6 で PNG 透明度を正しく処理します。
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1 ])
if ((version >= 5.5) && (document.body.filters))
{
for(var j=0; j {
var img = document.images[j]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG" )
{
var imgID = (img.id) ? "id='" img.id "' " : ""
var imgClass = (img.className) ) ? "class='" img.className "' " : ""
var imgTitle = (img.title) ? "title='" img.alt "" "
var imgStyle = "display :inline-block;" img.style.cssText
if (img.align == "left") imgStyle = "float:left;" imgStyle
if (img. align == "right") imgStyle = "float:right;" imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" imgStyle
var strNewHTML = " " " width:" img.width "px; height:" img.height "px;" imgStyle ";"
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
" (src='" img.src " ', sizingMethod='scale');">
"
img.outerHTML = strNewHTML
j = j-1
}
}
}
}
window.attachEvent("onload", rightPNG);
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。