在IE浏览器中正确显示PNG透明图片

黑色曼陀罗961

黑色曼陀罗961

2016-02-19 15:41

下面是个超简单的在IE浏览器中正确显示PNG透明图片教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!

  但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。

  解决这个的方法是增加javascript。具体方法如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  把下面的代码放在head区就可以解决问题了。

以下是引用片段:
script language="javascript"
function correctPNG() 
{
for(var i=0; idocument.images.length; i++)
{
  var img = document.images[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 

  也可以把这段代码单独加在一张图片上:

以下是引用片段:
span
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''male.png'',sizingMethod=''scale'');"/span

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

在IE浏览器中正确显示PNG透明图片

Web开发
在IE浏览器中正确显示PNG透明图片

在IE流览器中正确显示PNG透明图片

Web开发
在IE流览器中正确显示PNG透明图片

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

在IE浏览器中正常显示的字体效果设置

浏览器
在IE浏览器中正常显示的字体效果设置

IE浏览器图片不显示解决办法

浏览器
IE浏览器图片不显示解决办法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

IE10浏览器不显示图片的情况

浏览器
IE10浏览器不显示图片的情况

怎么在IE浏览器里面设置默认浏览器

计算机应用技术
怎么在IE浏览器里面设置默认浏览器

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Javascript 验证上传图片大小[客户端]

Javascript 验证上传图片大小[客户端]

Windows7不用重装也能开启AHCI的方法

Windows7不用重装也能开启AHCI的方法
下拉加载更多内容 ↓