关于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,最安全、最省力。

目录
相关文章
|
4月前
|
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份,名字排序不一样怎样写
|
10月前
|
计算机视觉 C++
png,jpg图片透明度化demo
png,jpg图片透明度化demo
63 0
|
编解码 前端开发 搜索推荐
Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来
在之前的几篇文章中,介绍了业界中比较火爆的图片技术SVG(Scalable Vector Graphics),比如[Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统](https://v3u.cn/a_id_143),我们可以使用svg来打造精美炫酷的分享小图标(icon),这一次我们使用python来将普通的静态的网站logo图片转换为带路径(path)的svg图片,这样就可以让网站logo能够变成动态的,作为一名不折腾不舒服斯基,一枚炫酷自带动画的网站logo自然能够满足我们的折腾欲,同时亦能击中我们的虚荣心。
Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来
|
前端开发
分享一个简单的GIF图制作方法
分享一个简单的GIF图制作方法
分享一个简单的GIF图制作方法