关于IE6和PNG24和PNG8之间的故事

简介:

最近在做学院的门户网站,以前都是直接忽略IE6的,首次尝试兼容IE6,学习兼容效果。

正常情况下:

xg2

IE6下:多了个灰色的背景,本来是半透明的效果。

xg3


png8和png24的区别

  1. png8:

    有1位的布尔透明通道

    要么完全透明,要么完全不透明

  2. png24:

    则有8位(256阶)的布尔透明通道

    半透明

    如果是半透明的图片存储为PNG8,图片四周会有锯齿,阴影也会不见png-8 和 gif 有一些相似之处,模式都是索引颜色,只支持像素级的纯透明,不支持 alpha 透明。


IE6下的png24和png8

我们通常说的“IE6 不支持 PNG 透明”,是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明,就像支持 gif 的透明一样。


解决方法

  1. 换成png8

    用PHOTOSHOP将png24转成png8

  2. 滤镜

    代码如下:

    background:url(../images/logo.png) no-repeat 0 0;  
     _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”../images/logo.png”,sizingMethod=’crop’);  
     _background:none;
    

    sizingMethod:crop|scale|image

    crop:以原图大小显示对容器没影响。

    scale:根据容器大小拉伸图片尺寸。

    image:根据图片尺寸调整容器大小。

    缺点:是背景图片无法定位。

  3. JS(滤镜原理)

    pngfix是让IE6支持PNG的一个jquery插件,支持网页图片,背景图(可平铺定位),文本框背景图等。

    推荐:转成png8,最安全、最省力。

目录
相关文章
|
5月前
|
Web App开发 XML 存储
一篇文章讲明白JPG、PNG、GIF、SVG等格式图片区别
一篇文章讲明白JPG、PNG、GIF、SVG等格式图片区别
如何复制同一张图片,生成50张排列名称为1.jpg,2.jpg,3.jpg,4.jpg,顺序1-50张的图片,同一张图片生成50份,名字排序不一样怎样写
如何复制同一张图片,生成50张排列名称为1.jpg,2.jpg,3.jpg,4.jpg,顺序1-50张的图片,同一张图片生成50份,名字排序不一样怎样写
|
11月前
|
计算机视觉 C++
png,jpg图片透明度化demo
png,jpg图片透明度化demo
74 0
|
前端开发
分享一个简单的GIF图制作方法
分享一个简单的GIF图制作方法
分享一个简单的GIF图制作方法
使用GDI+显示PNG
使用GDI+显示PNG
140 0
|
Web App开发 JavaScript 前端开发
|
Web App开发 前端开发 JavaScript
png-24在ie6中的几种透明方法
由于游戏类官网在页面背景和装饰人物的设计上追求画丽且与游戏风格想匹配,这就给前端页面制作人员带来了很多的麻烦,一个页面的制作主要时间和精力花费在兼容ie6上,而ie6因为不兼容png-24的图片一直被开发人员所鄙视。
1157 0