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

2016-04-10网页设计
47


  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!
  但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。
  解决这个的方法是增加javascript。具体方法如下:
  把下面的代码放在head区就可以解决问题了。
<scriptlanguage="javascript">
functioncorrectPNG()
{
for(vari=0;i<document.images.length;i )
{
varimg=document.images[i]
varimgName=img.src.toUpperCase()
if(imgName.substring(imgName.length-3,imgName.length)=="PNG")
{
varimgID=(img.id)?"id='" img.id "'":""
varimgClass=(img.className)?"class="" img.className """:""
varimgTitle=(img.title)?"title="" img.title """:"title="" img.alt """
varimgStyle="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
varstrNewHTML="<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>
The End

相关推荐

移动端,手机端 响应式布局头部代码
将如下代码加到你网页的头部之间: meta name=viewport content=width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no meta name=apple-mobile-web-app-capable content=yes / meta name=apple-mobile-web-app-statu...
2021-06-10 网页设计
262

javascript实现禁止鼠标右键的功能
遇到网页上有精美图片或者精彩文字想保存时,通常大家都是选中目标后按鼠标右键,在弹出菜单中选择图片另存为或复制来达到我们的目的。但是,目前有许多网页都屏蔽了鼠标右键,那么用js如何实现禁止鼠标右键的功能呢? 1、与禁止鼠标右键相关的JS说明 script...
2021-04-27 网页设计
164

video标签设置autoplay在手机浏览器无法自动播放视频的解决方案
在video标签上加个autoplay属性,在PC端浏览器里面运行流畅,但是在手机浏览器里面打开无法播放。原来现在的手机浏览器是不允许网页中视频自动播放的,只有与用户进行了一次交互动作,才可以播放视频。(音频同理) 方案一: 在页面上加一个弹框,用户点击了...
2019-05-27 网页设计
645

织梦DedeCms做SEO优化必做的步骤
在video标签上加个autoplay属性,在PC端浏览器里面运行流畅,但是在手机浏览器里面打开无法播放。原来现在的手机浏览器是不允许网页中视频自动播放的,只有与用户进行了一次交互动作,才可以播放视频。(音频同理) 方案一: 在页面上加一个弹框,用户点击了...
2019-05-27 网页设计
137

让网页标签页头部有新消息提醒和Title标题文字滚动显示效果
demo展示1: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / tit...
2019-05-18 网页设计
149

swiper无法自动播放的解决办法
1、首先看下自己网页中的js是否有异常,找不到js情况。 2、如果确认无异常的话,可能是你没有调用swiper的自动播放代码,请将以下代码加入到您网页中 script type=text/javascript $(function(){ var swiper = new Swiper(.swiper-container, { pagination:...
2019-04-10 网页设计
507