網(wǎng)頁設計中PNG背景在不同瀏覽器下的應用
2012/5/10 17:08:26來源：崔凱的博客
網(wǎng)頁設計中經(jīng)常會用到png透明圖片用來實現(xiàn)各種精美的變化特效。關于PNG透明背景在ie6和FIREFOX瀏覽器下顯示異常。
這里談一下不同瀏覽器內(nèi)，如何應用PNG圖片作背景。
一、在IE6中使用PNG背景
IE6本身并不認識PNG圖片的透明特性，雖然有讓IE6支持PNG透明背景的JS程序：
- function correctPNG()
- {
- var arVersion = navigator.appVersion.split("MSIE")
- var version = parseFloat(arVersion[1])
- if ((version >= 5.5) && (document.body.filters))
- {
- for(var j=0; j<document.images.length; 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;" + imgStyle
- if (img.align == "right") imgStyle = "float:right;" + imgStyle
- if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
- var strNewHTML = "<span " + imgID + imgClass + imgTitle
- + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
- + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
- + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
- img.outerHTML = strNewHTML
- j = j-1
- }
- }
- }
- }
- window.attachEvent("onload", correctPNG);
但是如果需要實現(xiàn)的地方僅有一處，還是用CSS來實現(xiàn)效率更高一些。這里應用的是IE5.5+的AlphaImageLoader濾鏡：
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='temp.png',sizingMethod='scale')
progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='temp.png',sizingMethod='scale')
需要注意的是：AlphaImageLoader濾鏡會導致該區(qū)域的鏈接和按鈕無效，解決的辦法是為鏈接或按鈕添加：position: relative;使其相對浮動。另外AlphaImageLoader無法設置背景的重復，所以對圖片的切圖精度會有較高要求。
二、在IE7、Opera和firefox中使用PNG背景
這幾款瀏覽器對PNG背景的支持很好，可以直接應用。而實際應用中，我們需要同時照顧IE6瀏覽器，所以需要給樣式表加上*html來做兼容處理。也就是給同一標簽兩次背景。
.uicss_cn{background:transparent url(../images/temp.png) repeat-x bottom left;height:3px;position:absolute;width:100%; font-size:0px;}
- *html .uicss_cn{background:transparent;
- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/temp.png", sizingMethod="crop");}
注意：無意中發(fā)現(xiàn)，自己插入的PNG背景兼容代碼無效。最后證實問題出在圖片文件上。使用fireworks生成的部分png圖片，需要導出為PSD格式，再從PS里另存為PNG文件，即可。”
[教程作者：admin]
免責聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請注明出處，素材資料僅供個人學習與參考，請勿用于商業(yè)用途！
本文地址：http://m.likemindfilms.com/tutorial/ps1143.html
本文地址：http://m.likemindfilms.com/tutorial/ps1143.html
這些是最新的
最熱門的教程
