首页 相关文章 IE6下如何让PNG图片变透明

IE6下如何让PNG图片变透明


经常会有人问我IE6下如何让PNG图片变透明,实际上IE6浏览器无法显示透明的PNG图片,这也让许多网页设计师头疼的事,一些很好的效果页面就因为无法透明显示PNG图片,所以不得不应做成JPG。

也有许多方法试图解决这一问题,但现在只需要使用一个叫做Unit PNG Fix的JS文件就能完全搞定。

该JS的下载地址:http://labs.unitinteractive.com/unitpngfix.php


的确是太出众了.

1.非常小的javascript文件:1kb!
2.解决因为IE的滤镜属性所带来的影响.
3.无论是img元素或background-image属性,都能有效果.
4.在加载页面之前就能自动运行.或者就一丁点的元素.
5.允许自动高宽.
6.使用起来超级简单.


[ 查看全文 ]

2016-02-20 标签:
  • 标签:Web开发
    PNG图像格式介绍: PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format,PNG)名称[ 查看全文 ]
  • 标签:Web开发
    之前一直在用 gif 图片或者用和背景色相同的 jpg 图片回避 IE6 不支持 PNG 图片背景色透明的 BUG,不过在做大菠萝3(Diablo III)主题时不愿放弃自己一个比较酷的 Idea,所以我还是决定要解决这个 BUG。 网上关于解决 IE6 这个 BUG 的方法很多,有用 JS 的,也有用 IE6 的 CSS 滤镜的。稍微看了一下,JS 的方法仅用于单个图片的效果,但若拿图片作背景则不行。CSS 滤镜的写法则简单很多,也能用作背...[ 查看全文 ]
  • 标签:Web开发
    最近重新审视了一下块集元素和内联元素,不是混淆,而是重新想了一下新的东西,有时候在我们进行重构的时候,偶尔会为了实际需要而将内联元素强制显示为块集元素,在一般情况下,这个是不会出问题的,而且可以很轻松的通过标准,但是在某一些情况下,虽然验证工具可以放过我们,但是在ie6下面会出现解析不正确的问题,下面就简单跟大家分享一下这个问题。 有时候由于需要文字和图片同时获取到点击态,或...[ 查看全文 ]
  • 标签:Web开发
    IE6下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度,实际在 IE 下显示的仍然是一个 12 px 左右高度的层。 要解决这个问题,可以强制定义该 div 的字体尺寸,或者定义 overflow 属性来限制 div 高度的自动调整。比如 div style="height: 6px; font: 0px ...[ 查看全文 ]
  • 标签:Web开发
    在项目中遇到一情况让困扰了半天, 同一张PNG8图片为何部份图标在IE6中消失 呢?当时一度怀疑是cache或hosts问题反反复复开关浏览器结果依然无效,连番测试终于找到了原因。   问题在于PNG8图片本身,以下l例子模拟了当时情况,当使用IE6来浏览的会发现第二行的4个图标隐形了。 原来下面的4个图标被调了90%的Alpha透明度(FW在导出PNG8的时能保留Alpha透明度PS则做不了这一点)。 而被Alp...[ 查看全文 ]
  • 标签:Web开发
    PNG.JS代码: // PNGHandler: Object-Oriented Javascript-based PNG wrapper // -------------------------------------------------------- // Version 1.1.20031218 // Code by Scott Schiller - www.schillmania.com // -------------------------------------------------------- // Description: // Prov...[ 查看全文 ]
  • 标签:Web开发
    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己的博客模板的时候,遇到了这个问题。当时就简单的无视了IE6尽管有几个使用IE6的朋友,一起BS我但是对于大项目或商业网站,如果有用到这个属性的时候,是不可能直接无视的。 你是如何让position:fixed在IE6中工作的? 本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。...[ 查看全文 ]
  • 标签:Web开发
    png图片 有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利! 但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。 解决这个的方法是增加javasc...[ 查看全文 ]
  • 标签:Web开发
    png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利! 但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。 解决这个的方法是增加javascript。具体方法...[ 查看全文 ]
  • 标签:Web开发
    相关文章:网页在IE6下正常在IE7下错位的问题 问: IE6网页显示错位,IE7显示正常 我用dreamweaver制作的静态页面,DIV+CSS格式的,在IE7.0浏览器和火狐浏览器中显示都很正常,但是在IE6.0中显示就不正常,这是怎么回事呀,请高手帮忙?! 答: 区别不同浏览器,CSS hack写法: 区别IE6与FF: backgroundrange;*background:blue; 区别IE6与IE7: background:green !important;background:blue;...[ 查看全文 ]
  • 标签:Web开发
    问: css+div做的网页在ie7里错位了,在ie6里好好的,这个在css里可以改吗? 答: 用CSS+DIV来写网站代码的好处显而易见,这里不多说了,但由于不同浏览器对CSS的解释不统一,造成不同浏览器下页面错位的现象十分常见 cs.Phontol.com页面乱的原因是因为IE6认为一个DIV超宽了,所以把本应float;right的DIV挤了下去。Phontol.com而如果设置为IE6下显示正常的宽度,则在IE7和Firefox下看页面就会少了一...[ 查看全文 ]
  • 标签:Web开发
    HTML 的空白符处理规则 HTML 中的空白符包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。 我们知道,在默认情况下,HTML 源码中的空白符均被显示为空格,并且连续的多个空白符会被视为一个,或者说,连续的多个空白符会被合并。 然而在有些时候,我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现,或者需要源码中的换行符能起到真正的换行作用。于是,我们发现了 pre 标签,...[ 查看全文 ]
  • 标签:Web开发
    经常遇到莫名其妙让IE6崩溃的事情。今天看到了一篇好文章,数字生活整理整理发上来,以后开发的时候要注意了。 鉴于国内IE6的市场份额还在主流的情况,一定要避免出现以下情况。 IE6真脆弱啊 1.设置scrollbar-base-color,css里给table做了定位,再通过js改变其定位IE6就崩溃了。 关键代码: style type="text/css"   html, body {     scrollbar-base-color: #330066; } .crash ...[ 查看全文 ]
  • 标签:Web开发
    参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统:Windows 我喜欢position:fixed,它很酷。 但ie6总不支持它,所以用其他的属性来模拟(这个模拟在主流浏览器中都兼容,所以其他浏览器也不需要分开写position:fixed了)。 看效果先: 运行代码框 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra...[ 查看全文 ]
  • 标签:Web开发
    在处理css的机制上,IE总是有很多让人吐血的举动,但对于他们现在的改进力度还是值得高兴的。 就拿对伪类:hover的支持来说,IE7+终于添加了对a以外其它标签的支持。对于这样的改进,当然是要拍手称快的,但在IE6下,:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。 很多人可能都已经知道了:hover在IE6及更早浏览器(以下称IE6-)下的一...[ 查看全文 ]
  • 标签:Web开发
    首先我们知道这个效果应该是一个老话题了。 今天整理文件的时候,发现自己以前的一些布局的解决方法躺在文件夹里很长时间了,翻翻老底吧 需要说明的是有幸也见到过CSSPLAY的老工程师站长对这个效果的实现,而且肯定是很早就给出来了。 闲话少说,上源码: 触发并利用IE6-layout的怪异特性,css实现: style type="text/css" .ie6-out{ _margin-left:900px; _zoom:1; } .ie6-in{ _position:rela...[ 查看全文 ]
  • 标签:Web开发
    在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是见机行事,根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳,供大家参考。方法整理[ 查看全文 ]
  • 标签:Web开发
    在网站改版过程中, Div和css代码 都么没有问题,在IE7,IE8,Firefox下都能正常的运行,但是在IE6下,出现文字溢出的Bug, 通过对比正常的网页与出错网站的代码,发现是因为 注释代码 的问题.通过查询,得知,html的注释代码的确能引起布局混乱,简单的方法就是,删除所有的注释代码,布局就显示正常. 如下是有关这个问题的跟具体的文章,供大家参考. 在网页设计以及编程的时候,适当的进行注释,不仅使自己的思路...[ 查看全文 ]
  • 标签:Web开发
    在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是见机行事,根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳,供大家参考。方法整理[ 查看全文 ]
  • 标签:Web开发
    经常遇到莫名其妙让IE6崩溃的事情。今天看到了一篇好文章,网页教学网整理整理发上来,以后开发的时候要注意了。 鉴于国内IE6的市场份额还在主流的情况,一定要避免出现以下情况。 IE6真脆弱啊 1.设置 scrollbar-base-color ,css里给table做了定位,再通过js改变其定位IE6就崩溃了。 关键代码: style type="text/css"   html, body {     scrollbar-base-color: #3...[ 查看全文 ]
手机页面 收藏网站 回到头部