IE6支持PNG24图片背景透明

网上关于IE6支持PNG24图片背景透明的方法有数种,以下只列出其中两种个人认为比较实用的方法。

第一种:使用IE自身滤镜
background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="a.png" ,sizingMethod="crop");

原理:其他浏览器调用PNG,IE6则先设背景没有(必须),然后调用滤镜使之显示PNG图片。

第二种:DD_belatedPNG(绝佳方案)

网上解决IE6png透明的方法有很多种,但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与 background-repeat。DD_belatedPNG支持backgrond-position与background-repeat,同时还支持a:hover属性,以及<img>。

原理:这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.

使用方法:

1.下载DD_belatedPNG.js文件。

2.在网页中引用,如下:
      <!--[if IE 6]>
            <script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script>
            <script type="text/javascript">

DD_belatedPNG.fix(‘.png_bg‘);    /* 将 .png_bg 改成你应用了透明PNG的CSS选择器*/

</script>

<![endif]-->

一种便捷的写法:DD_belatedPNG.fix(‘div, ul, img, li, input , a‘);

3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名。

使用a:hover请留意:想要用透明PNG作为a:hover的背景图片时,那么你需要留意你的代码,需要以" a:hover"来作为选择器. 否则可能会导致无法成功。例如:DD_belatedPNG.fix(‘.box a:hover‘);另外,如果使用DD_belatedPNG.fix(‘div, ul, img, li, input , a‘);简洁写法的话,如果a链接和hover都使用了png背景图的话,没什么问题,如果a链接本身没有背景图,而hover中使用背景图,会导致透明无效,解决方法:给a添加空背景。例子:

hover有效:

a { background: url(images/a.png); }
    a:hover { background: url(images/b.png); }

hover无效:

a { }
    a:hover { background: url(images/b.png); }

解决方法:

a { background: url(images/.png); }
    a:hover { background: url(images/b.png); }

PNGDemo下载

推荐使用第二种,接近完美,使用方便,并且无用代码少,IE6淘汰后直接删除js文件和引用即可。

时间: 2024-08-27 01:57:13

IE6支持PNG24图片背景透明的相关文章

最简单最保险的方法:让IE6支持PNG图片透明

要想png图片背景透明: 最保险的办法是:将格式处理成png8的(因为我们一般保存的是PNG24): png8和gif都是8位的透明度,IE6与生俱来就支持png8的索引色透明度,但不支持png或8位以上的 alpha 透明度.而对于非动画的GIF建议你使用PNG8,因为体积会更小~ 想将png24转换成png8,方法也很简单,使用photoshop转换就可以了. png24转换成png8的具体方法为:文件->存储为web和设备所用格式->在“预设”里,选择“PNG-8”和“”透明度,保存即可

设置二维码图片背景透明教程

继之前的博客:PDF文件添加二维码水印教程.图片添加二维码水印教程之后,对之前的添加二维码水印功能进行完善,之前的程序生成的二维码图片背景不是透明的,所以不是很美观,所以本博客对程序进行完善,对二维码图片设置背景为透明的,不过这样美观了,但是很有可能出现遮住pdf文字或者图片的情况,这种情况会导致二维码不能扫描 参考网上教程,封装个方法调用 /** * 设置图片背景透明 * @date 2019年6月27日下午8:46:42 * @param srcImage * @param alpha *

【转】cocos2d-x游戏开发(十四)用shader使图片背景透明

转自:http://blog.csdn.net/dawn_moon/article/details/8631783 好吧,终于抽时间写这篇文章了. 手头上有很多人物行走图,技能特效图等,但这些图都有个纯黑色背景,怎么样将内容显示出来,让背景透明呢?前段时间搞了一下,感谢群里的童鞋们,提供了思路和方法. 这里用shader处理了像素,使黑色背景透明,直接上代码 ShaderSprite.h 1 #ifndef __TestShader__ShaderSprite__ 2 #define __Tes

cocos2d-x—使用shader使图片背景透明

这里用shader处理了像素,使黑色背景透明,直接上代码 ShaderSprite.h [cpp] view plaincopyprint? #ifndef __TestShader__ShaderSprite__ #define __TestShader__ShaderSprite__ #include "cocos2d.h" USING_NS_CC; class ShaderSprite : public CCSprite { public: static ShaderSprite

Android 设置按钮背景透明与半透明_图片背景透明

Button或者ImageButton的背景设为透明或者半透明 半透明<Button android:background="#e0000000" ... />  透明<Button android:background="#00000000" ... /> 颜 色和不透明度 (alpha) 值以十六进制表示法表示.任何一种颜色的值范围都是 0 到 255(00 到 ff).对于 alpha,00 表示完全透明,ff 表示完全不透明.表达式顺

cocos2d-x3.2中用shader使图片背景透明

今天有人问我问题,说怎么实现背景虚化,换句话说,就是把某张图片的背景颜色(比如白色)给弄没了,不然贴在屏幕上有白色背景.下面是解决方法.用shader处理了像素,使黑色背景透明. Shader.h #ifndef __TestShader__ShaderSprite__ #define __TestShader__ShaderSprite__ #include "cocos2d.h" USING_NS_CC; class ShaderSprite : public CCSprite {

ie6背景透明的设置方法 ie6背景颜色透明和png图像透明解决方法

IE6浏览器,让我们又爱又恨.爱它的是,可以让我们写的代码的时候,可以更标准,恨的是,它有太多无厘头的IE6常见bug(详情点击),让我们焦头烂额.现在现在用百度浏览器调查,国内占有率不到6%了,但是,就怕碰到需要调兼容ie6的网站. 其中,一个IE6常见问题就是IE6透明背景问题了.透明背景主要分背景颜色透明和背景图片或者png图片透明问题. 一.IE6背景颜色透明 一般浏览器,给一个盒子透明背景写法是 :opacity: 0.5;   -moz-opacity: 0.5;-webkit-op

ie6下:png图片不透明 和 背景图片为png的节点的内部标签单击事件不响应

1.png图片不透明 少量图片时:使用滤镜: _background:none; _filter:prodig:DXImageTransform.Microsoft.AlphaImageLoader(src="../a.png"); 注意: 测试发现如果把样式写在css文件里,而非当前页面的<style></style>里,则不会生效. 图片多时:使用js插件,可参考ie6里png图片不透明 2.背景图片为png的节点的内部标签单击事件不响应 参考张鑫旭的Jav

位图背景透明与设置位图透明度

位图怎么像PNG图片背景透明呢? 关键在于对单色位图的使用,单色位图,黑色表示前景颜色(可代表任意),白色代表图片背景颜色 实现API :Transparentblt来理解单色位图 函数原型:BOOL TransparentBlt(HDC hdcDest, int nXOriginDest, int nYOriginDest, int nWidthDest, int hHeightDest, HDC hdcSrc, int nXOriginSrc, int nYOriginSrc, int nW