溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

IE6中PNG Alpha透明方法有哪些

發(fā)布時(shí)間：2022-01-12 13:45:11 來(lái)源：億速云 閱讀：84 作者：柒染 欄目：移動(dòng)開(kāi)發(fā)

今天就跟大家聊聊有關(guān)IE6中PNG Alpha透明方法有哪些，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

很多人說(shuō)IE6不支持PNG透明，其實(shí)IE支持100%透明的PNG，瘋狂的IE6只是不支持png的Alpha透明。
這個(gè)BUG給我們帶來(lái)了很大的困擾。
但是這仍然存在很多問(wèn)題，比如半透明的PNG背景圖片。
小編整理了4種IE6中PNG Alpha透明的方法：
第一種方法：AlphaImageLoader 篩選器
微軟給出了一個(gè)解決方案：http://support.microsoft.com/kb/294714/zh-cn

使用簡(jiǎn)介：在每個(gè)標(biāo)簽樣式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
注意事項(xiàng):
AlphaImageLoader難以實(shí)現(xiàn)插入圖片<img src=”.png”/>透明
AlphaImageLoader方法用于背景圖片上,實(shí)現(xiàn)background-image的效果
AlphaImageLoader IE8不支持
因?yàn)镮E7支持AlphaImageLoader,避免沖突建議使用CSS hack區(qū)分開(kāi),只針對(duì)IE6使用
測(cè)試實(shí)例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html

第二種方法：PNG Transparency in IE
使用簡(jiǎn)介：相對(duì)來(lái)說(shuō)比較簡(jiǎn)潔，使用一段包含濾鏡的JavaScript 就可以模擬圖片或背景 PNG alpha 透明度
注意事項(xiàng):
根目錄的spacer.gif透明圖片作為png圖片的替換,寫(xiě)在JavaScript中的spacer.gif路徑根據(jù)需要調(diào)整
PNGTransparncyinIE方法在背景應(yīng)用上只能做到background-image的效果, 背景重復(fù)坐標(biāo)調(diào)用等暫時(shí)實(shí)現(xiàn)不了
官方原文：http://codingforums.com/archive/index.php?t-80555.html
測(cè)試實(shí)例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html

第三種方法：IE PNG Fix v1.0 / 2.0 Alpha 3
這是目前最新版本，今天重點(diǎn)介紹的一個(gè)方法。
使用簡(jiǎn)介：頁(yè)面標(biāo)簽使用behavior:url(”iepngfix.htc”);來(lái)調(diào)用外部包含js、css的iepngfix.htc文件來(lái)修正PNG alpha 透明度。
測(cè)試實(shí)例1：http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
測(cè)試實(shí)例2（官方，e文）：http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
* 支持<img src=”">元素。
* 支持的背景PNG圖像（不像許多其他的腳本！ ）
* 支持CSS1背景重復(fù)和位置（通過(guò)可選插件）
* 背景圖像可以被界定內(nèi)置或在外部的樣式表。
* 自動(dòng)處理改為鋼骨混凝土/背景通過(guò)正常的JavaScript （例如鼠標(biāo)懸停翻車） -沒(méi)有特殊的編碼需要。
* 改變支持包括CSS的&rsquo;類別&rsquo;的變化因素。
* 采用自動(dòng)變通的<a href=”">要素巴布亞新幾內(nèi)亞背景因素。
* 微小的腳本（快速下載） 。
* 領(lǐng)有牌照的下一個(gè)自由軟件許可證。
如何使用 Follow these simple steps to add this to your page:遵循這些簡(jiǎn)單的步驟，將此添加到您的網(wǎng)頁(yè)：
1. 復(fù)制并粘貼iepngfix.htc和blank.gif到您的網(wǎng)站文件夾中。
2. 復(fù)制并粘貼到您的網(wǎng)站的CSS或HTML ：
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
這的CSS選擇器必須包含標(biāo)簽/內(nèi)容要巴布亞新幾內(nèi)亞支持-基本上，給它一個(gè)逗號(hào)分隔的清單上的標(biāo)簽使用。它還必須包括正確的路徑。宏達(dá)相對(duì)H TML文件的位置（不相對(duì)的CSS文件！ ） 。 例如，你可能看起來(lái)像這樣：
<style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>
3. 如果您的網(wǎng)站使用的子文件夾，打開(kāi)。宏達(dá)文件在文本編輯器如Windows記事本，并改變blankImg變數(shù)，包括正確道路blank.gif像這樣：
IEPNGFix.blankImg = '/images/blank.gif';
同樣的路徑是相對(duì)的HTML文件。否則，你將看到一個(gè)“破碎的形象”的圖形！
4. 如果你想支持CSS1背景重復(fù)和背景位置，請(qǐng)務(wù)必包括附加。 js文件在您<head> ：
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
否則，背景圖片可以工作，但不會(huì)重復(fù)或立場(chǎng)。
5. 可以舒舒服服地坐下欣賞！ 也許考慮捐助，以支持該腳本的發(fā)展如果你喜歡您所看到的，因?yàn)槲一藬?shù)百小時(shí)的開(kāi)發(fā)，測(cè)試和支持它： ） 。 另外，我一定會(huì)感謝一個(gè)入鏈接您的網(wǎng)站到地雷！
官方原文：http://www.twinhelix.com/css/iepngfix/
如果你有興趣了解更多信息或另一種方法激活的腳本保持審定的CSS相容性，看到源代碼演示文件。
&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&ndash;
如何解決共同問(wèn)題
1.我已經(jīng)貼在CSS中，但我pngs并不透明！
請(qǐng)務(wù)必記住，路徑個(gè)文件是相對(duì)于HTML文件，而不是的CSS文件（如的CSS背景圖像） 。 如果您想要測(cè)試的路徑，插入： alert('This works!');進(jìn)入。宏達(dá)文件。
2.它的工程離線而不是在線。
第一次嘗試解壓這個(gè)預(yù)設(shè)的示范和上傳到Web服務(wù)器原樣。 如果它不工作，您可能有一個(gè)MIME類型的問(wèn)題。您必須確保您的服務(wù)器發(fā)送正確的MIME類型“文本/的X組成部分”的。宏達(dá)文件。 嘗試之一，這兩個(gè)容易修復(fù)程序：
3.上傳的。 “ htaccess ”文件，該腳本的下載壓縮到Web服務(wù)器上，這將使阿帕奇發(fā)出正確的MIME類型。
4.而不是所謂的“ IEPNGFIX.HTC ”從你的CSS ，上傳IEPNGFIX.PHP的同一文件夾中，并呼吁不是，這也發(fā)出了正確的MIME類型。
5.我pngs是透明的，但有一個(gè)有趣的邊界或紅色的“ X ”圖標(biāo)。
檢查blankImg變量設(shè)置正確的。宏達(dá)文件，再次相對(duì)應(yīng)的HTML文件，載PNGs 。
圖像扭曲，或此腳本休息，我的網(wǎng)頁(yè)布局。
當(dāng)適用于圖像沒(méi)有設(shè)置方面，該腳本將嘗試與“猜測(cè)”正確的圖像尺寸和適用的。如果它獲得做錯(cuò)了什么，給您一個(gè)明確的圖像width 。
鏈接或表單元素一個(gè)png，d元素是不能點(diǎn)擊。
測(cè)試實(shí)例1：http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
測(cè)試實(shí)例2（官方，e文）：http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html

第四種方法：IE PNG Fix v1.0 / 2.0 Alpha 3
使用簡(jiǎn)介：ie7/ie8-js是一個(gè)解決IE與W3C標(biāo)準(zhǔn)的沖突的JS庫(kù)，使微軟的IE的行為像一個(gè)Web標(biāo)準(zhǔn)兼容的瀏覽器，支持更多的W3C標(biāo)準(zhǔn)。
測(cè)試實(shí)例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html

看完上述內(nèi)容，你們對(duì)IE6中PNG Alpha透明方法有哪些有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手