PNG画像とPNG背景を透明にする方法（マルチブラウザ対応）

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

WBOY

リリース： 2016-05-16 18:46:57

オリジナル

1489 人が閲覧しました

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); 