JS使png背景图片透明
png图片有很好的品质，阴影效果也不会有杂边，很流畅。如果插入网页的话可以给网站内容增色不少！更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景，如在有颜色过渡背景上插入不规则边框的图片，带来极大和便利！
但目前IE中对于插入的透明背景的png的图片是不能正常显示的，IE会自动给".png"格式的图片加个灰色背景。解决这个的方法是增加javascript，具体方法有两种：
第一种：把下面的代码放在head区就可以解决问题了。
|
<script language="javascript"> function correctPNG() { for(var i=0; i<document.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='你的图片名称.png',sizingMethod='scale');"></span> |
目前大部分浏览器对PNG的支持并不完善,IE虽然可以显示PNG图片，但如果PNG图片中含有透明部分，那么透明部分的显示就不正常了。
解决这个问题大致有以下方法(其原理都是通过AlphaImageLoader滤镜来解决)。
方法一:
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png);width:200px;height:50px"></div>
点评:这种方法虽然较好的解决了IE 5+的浏览器，但却得本来能正常显示透明PNG图片的FireFox无法正常显示!
方法二:
<script type="text/javascript">
// PNG纠正控件 1.0 For IE 5.5或更高.
// 作者:舜子
function isIE(){
if (navigator.appName!="Microsoft Internet Explorer") {return false}
return true
}
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images
var LW=img.width
var LH=img.height
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
img.style.filter+="progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img.src+", sizingmethod=scale);"
img.src="/images/transparent.gif"//transparent.gif为1px*1px的透明gif图片
img.width=LW
img.height=LH
}
}
}
if (isIE()) {window.attachEvent("onload", correctPNG);}
</script>
点评:这种方法确实能解决这个问题，但是如果不是在本地调试，通常需要一段时间的转换!
方法三:
<div id="header"><!--此DIV为需要插入PNG图片的区域-->
<script type="text/javascript">
if (navigator.appName!="Microsoft Internet Explorer") {
document.write("<img src=/"/images/header.png/" width=/"200/" height=/"50/" alt=/"站长吧 Master8.NET/" />");
} else {
document.write("<img style=/"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;/" src=/"{$rootpath}/images/transparent.gif/" width=/"200/" height=/"50/" alt=/"站长吧 Master8.NET/" />");
}
</script>
<div>
点评:事实上网页中绝对需要使用透明PNG图片的地方并不多，所以如果你的网页中仅仅是一两处使用透明PNG图片，建议用这种方法。
如果浏览者禁用了js,方法二和三当然失去了作用。针对方法三，可以做一些完善:
<div id="header">
<div id="Index_header">图片简要说明,正常浏览本站请不要禁用js</div>
<div>
<script type="text/javascript">
if (navigator.appName!="Microsoft Internet Explorer") {
document.getElementById('logo').innerHTML="<img src=/"/images/header.png/" width=/"200/" height=/"50/" alt=/"站长吧 Master8.NET/" />"
} else {
document.getElementById('logo').innerHTML="<img style=/"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/header.png, sizingmethod=scale);width:200px;height:50px;/" src=/"/images/transparent.gif/" width=/"200/" height=/"50/" alt=/"站长吧 Master8.NET/" />"
}
</script>
JS使png背景图片透明相关推荐
- 写网页的那些小总结——背景图片透明，背景图片铺满页面
1.使用opacity属性会让背景图片和盒子中的文字内容都透明,如果想要背景图片透明,文字内容不透明,就可以使用以下代码: 某例子: background: rgba(255,255,255,0.6) ...
- html 图片透明字不透明,CSS实现背景图片透明，文字不透明效果的两种方法
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
- CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位 至于opacity的作用:转化图像的透明程度.值定义转换 ...
- 如何实现背景/背景图片透明文字不透明
如何实现背景/背景图片透明文字不透明 第一种情况,背景为自定义颜色 第二种情况,背景为图片 总结: 第一种情况,背景为自定义颜色 直接给父级背景颜色设置background:rgba();就可以了: ...
- html文本框背景text怎么变透明,css怎么设置背景图片透明文字不透明？
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果.下面我们来看一下这两种方法的使用. CSS实现背景图片透明,文字不透明效果的两种方法: 方法一(半透明效果) ...
- 【前端】CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
- CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习. 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1 ...
- 使IE6下PNG背景图片透明的七种方法
PNG图像格式介绍: PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性.流式 网络图形格式(Portable ...
- IE6中png背景图片透明的最好处理方法
在IE6浏览器下png(24位)的图片显示是不能透明的. 1.处理办法就是用DDPngMin.js <!--[if IE 6]> <script src="js/DDPng ...
最新文章
- 女孩子学电脑进入IT行业有什么优势？
- 【Android 逆向】ART 脱壳 ( InMemoryDexClassLoader 脱壳 | InMemoryDexClassLoader 类加载器脱壳点总结 )
- 【C 语言】二级指针案例 ( 字符串切割 | 返回 二维数组 作为结果 )
- SpringBoot2.0新特性 - Quartz自动化配置集成
- HALCON Progress
- php设置超链接,怎么给一个PHP密码访问页面加超链接
- 将所有文件从目录复制到Python中的另一个目录
- c语言 乘除法优先级,运算符运算符优先级 - C语言教程
- git多项目管理模式_Git十年，一项开放商业模式倡议以及更多新闻
- gperftools
- Android Dialog用法
- c语言unicode编码转gbk,基于C语言的GBK-Unicode文本编码转换系统的实现
- android手机计步器开发,超精准的Android手机计步器开发
- php中阿里云快递物流查询接口使用
- word转chm文件
- 从本质出发理解掌握三大坐标系下的三大方程（三）--旋度公式
- 用python放音乐_python怎么播放音乐
- 使用阿里云/腾讯云的云服务器搭建邮箱服务器，避开25端口限制
- 福禄克万用表的硬芯和牛屎芯分别是什么，有什么区别？
- IOS获取屏幕分辨率