实现png图片和png背景透明(支持多浏览器)的方法

 更新时间:2009年09月08日 22:42:13   作者:  
Firefox和Opera对PNG的支持非常的好,都是IE却无视PNG图片这一特性的“存在”,虽然IE7已经支持都是IE6还是不行。
虽然有让IE6支持PNG透明背景的JS程序,都是不是很方便,还是用CSS来实现的好。使用到的就是:IE5.5+的AlphaImageLoader滤镜。
1.png背景透明
解决办法:
复制代码 代码如下:

#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
}
html>body #div1 {
background-repeat: repeat;background-image: url(bj1.png);
}
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")
}

附加:IE才识别的通配符(*),来定义IE浏览器中的滤镜
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器(>)
语法:
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性:
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
      true : 默认值。滤镜激活。
      false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
        image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
        scale : 缩放图片以适应对象的尺寸边界。
        src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
2.png图片透明
如果在网页中直接插入png图片想使其透明只需加入以下js代码,整个页面内的所有直接插入的png图片都可以实现透明:
复制代码 代码如下:

<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.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);
</script>

相关文章

  • 小程序怎样让wx.navigateBack更好用的方法实现

    小程序怎样让wx.navigateBack更好用的方法实现

    这篇文章主要介绍了小程序怎样让wx.navigateBack更好用的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • JS获取本机IP地址的2种方法

    JS获取本机IP地址的2种方法

    我们在项目经常遇到获取本机IP地址的需求,下面这篇文章主要给大家介绍了关于JS获取本机IP地址的2种方法,文中通过示例代码介绍的非常详细,本文适合新手,需要的朋友可以参考下
    2022-09-09
  • JavaScript Date对象详解及时间戳和时间的相互转换问题

    JavaScript Date对象详解及时间戳和时间的相互转换问题

    这篇文章主要介绍了JavaScript Date对象详解及时间戳和时间的相互转换问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • 实现js保留小数点后N位的代码

    实现js保留小数点后N位的代码

    最近在做项目的时候,遇到要保留小数点后N位的问题,经过一番思索,最终完成了,这里记录一下,下次需要直接就能拉出来用了
    2014-11-11
  • javascript获取url上某个参数的方法

    javascript获取url上某个参数的方法

    获取url上的某个参数的方法有很多,在本文为大家介绍下使用javascript是如何实现的,感兴趣的朋友不要错过
    2013-11-11
  • JS获取当前日期时间并定时刷新示例

    JS获取当前日期时间并定时刷新示例

    这篇文章主要介绍了JS如何获取当前日期时间并执行定时刷新,示例代码如下,需要的朋友不要错过
    2014-06-06
  • JavaScript 中的作用域与闭包

    JavaScript 中的作用域与闭包

    这篇文章主要介绍了JavaScript中的作用域与闭包,JavaScript是一种具有函数优先的轻量级,解释型或即时编译型的编程语言,下文是更多相关介绍需要的小伙伴可以参考一下
    2022-05-05
  • 一文学会用JS判断文字是否被省略(ellipsis)

    一文学会用JS判断文字是否被省略(ellipsis)

    这篇文章主要给大家介绍了用JS如何判断文字被省略ellipsis,CSS帮我们搞定了省略,但是JS并不知道文本什么时候被省略了,所以我们得通过JS来计算,接下来,我将介绍2种方法来实现JS计算省略,需要的朋友可以参考下
    2023-08-08
  • MSN消息提示类

    MSN消息提示类

    MSN消息提示类...
    2006-09-09
  • 详解如何在webpack中做预渲染降低首屏空白时间

    详解如何在webpack中做预渲染降低首屏空白时间

    这篇文章主要介绍了详解如何在webpack中做预渲染降低首屏空白时间,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论