IE6下png图片透明代码
生活随笔
收集整理的這篇文章主要介紹了
IE6下png图片透明代码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
png圖片有很好的品質(zhì)，陰影效果也不會有雜邊，很流暢。如果插入網(wǎng)頁的話可以給網(wǎng)站增色不少。更重要的是，在不增加圖片容量大小的情況下，提高了頁面圖片的質(zhì)量。對于有復(fù)雜背景，如在有顏色過度背景上插入不規(guī)則邊框的圖片帶來極大很便利! 但目前IE下對于插入的透明背景的png圖片是不能正常顯示的。IE會自動給png格式的圖片加上一個灰色背景。解決這個問題有兩種方法。 第一種方法：把下面的javascript代碼加入網(wǎng)頁的<head>與</head>之間，這樣網(wǎng)頁中所有透明背景的png圖片都可以正常顯示：(經(jīng)一葉扁舟測試可以）
<script?language="javascript">
function?correctPNG()?
{
for(var?i=0;?i<document.p_w_picpaths.length;?i++)
{
?var?img?=?document.p_w_picpaths[i]
?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
??i?=?i-1
?}
}
}
window.attachEvent("onload",?correctPNG);
</script>
第二種方法：把下面的代碼加在網(wǎng)頁中的png圖片顯示代碼中：
<span?style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='圖片名稱.png',sizingMethod='scale');"></span> 第三種?在頭部加入 <script?language="JavaScript">
function?correctPNG()?//?correctly?handle?PNG?transparency?in?Win?IE?5.5?&?6.
{
?????var?arVersion?=?navigator.appVersion.split("MSIE")
?????var?version?=?parseFloat(arVersion[1])
?????if?((version?>=?5.5)?&&?(document.body.filters))?
?????{
???????for(var?j=0;?j<document.p_w_picpaths.length;?j++)
???????{
???????????var?img?=?document.p_w_picpaths[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);
</script>
<script?language="javascript">
function?correctPNG()?
{
for(var?i=0;?i<document.p_w_picpaths.length;?i++)
{
?var?img?=?document.p_w_picpaths[i]
?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
??i?=?i-1
?}
}
}
window.attachEvent("onload",?correctPNG);
</script>
第二種方法：把下面的代碼加在網(wǎng)頁中的png圖片顯示代碼中：
<span?style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='圖片名稱.png',sizingMethod='scale');"></span> 第三種?在頭部加入 <script?language="JavaScript">
function?correctPNG()?//?correctly?handle?PNG?transparency?in?Win?IE?5.5?&?6.
{
?????var?arVersion?=?navigator.appVersion.split("MSIE")
?????var?version?=?parseFloat(arVersion[1])
?????if?((version?>=?5.5)?&&?(document.body.filters))?
?????{
???????for(var?j=0;?j<document.p_w_picpaths.length;?j++)
???????{
???????????var?img?=?document.p_w_picpaths[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);
</script>
轉(zhuǎn)載于:https://blog.51cto.com/hmlwl/1166985
總結(jié)
以上是生活随笔為你收集整理的IE6下png图片透明代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jetty和Tomcat
- 下一篇： 敏捷实践的价值观和方法论