さまざまなブラウザでの PNG 背景のアプリケーション_JavaScript スキル-jsチュートリアル-php.cn

さまざまなブラウザでの PNG 背景のアプリケーション_JavaScript スキル

WBOY

リリース： 2016-05-16 18:51:16

オリジナル

1051 人が閲覧しました

1. IE6 で PNG 背景を使用する
IE6 が PNG 透明背景をサポートできるようにする JS プログラムがありますが、IE6 自体は PNG 画像の透明機能を認識しません:

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

functioncorrectPNG() 
{ 
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.title "' " : "title='" img .alt "' " 
var imgStyle = "display:inline-block;" img.style.cssText 
if (img.align == "left") imgStyle = "float:left;" 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); 

ただし、実装する必要がある場所が 1 つだけの場合は、 CSS を使用する方が効率的です。ここでは IE5.5 の AlphaImageLoader フィルターが適用されます:

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

 フィルター: 
progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src='temp.png',sizingMethod='scale') 

AlphaImageLoader フィルターであることに注意してください。この領域のリンクとボタンが無効になる場合、解決策は、リンクまたはボタンに相対的な位置を追加することです。また、AlphaImageLoader では背景の繰り返しを設定できないため、画像の切り出し精度が高くなります。

2. IE7、Opera、Firefox で PNG 背景を使用するこれらのブラウザは PNG 背景を適切にサポートしており、直接適用できます。実際のアプリケーションでは、IE6 ブラウザにも同時に対応する必要があるため、互換処理のためにスタイルシートに *html を追加する必要があります。つまり、同じラベルに 2 つの背景を与えます。
例:

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

.uicss_cn{背景:透明 URL (../images/temp.png)repeat-x 左下;高さ:3px;位置:絶対;幅:100%;フォントサイズ:0px;} 
*html .uicss_cn{背景:透明; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/temp.png", sizingMethod="crop");} 

3、追加点 3月27日、私が挿入したPNG背景互換性コードが無効であることに偶然気づきました。最終的に、問題は画像ファイルにあることが確認されました。花火を使用して生成された一部の PNG 画像は、PSD 形式にエクスポートしてから、PS から PNG ファイルとして保存する必要があります。