png那些事儿

趁着小志的《css那些事儿》正火,引用一下标题,哈哈,傍大款。

首先请大家请给PNG8一个机会:

全透明的png8可以在任一浏览器正常显示(就像gif一样)。

推荐两篇文章给大家:http://www.ued163.com/?p=640http://www.ued163.com/?p=645

半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明,其它浏览器都能正常显示半透明。这个bug并不需要特殊对待,因为在不支持半透明的浏览器下只是显示为全透明,对用户体验影响不大,它反而是透明gif的加强版。
第二个bug没有什么好的方法解决,只能通过影响性能的方法AlphaImageLoader与需要加特殊标签(VML)。

到底是png24 Alpha透明还是png32 Alpha透明?

其实这个问题根本就不用回答,这个可能跟每个人使用切图软件有关。
1.Photoshop

  • Photoshop只能导出布尔透明(全透明或者全不透明)的PNG8。
  • Photoshop能导出alpha透明(全透明,全不透明,半透明)的PNG24。
  • Photoshop不能导出PNG32。

2.Fireworks

  • Fireworks既能导出布尔透明的PNG8,也能导出alpha透明()的PNG8,半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明.
  • Fireworks能导出PNG24,但是和jpeg差不多,不能透明。
  • Fireworks能导出alpha透明的PNG32。

所以png24 Alpha透明或者png32 Alpha透明只是使用切图软件差别,在浏览器中Alpha透明的。表现是一致的。

ie6下的png Alpha透明

目前ie6下的png24 Alpha透明还是png32 Alpha透明只能使用影响性能的AlphaImageLoader方法,即使很多人说的使用js其实也是使用了这个方法。
方法在css中使用:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=布尔值(Boolean),src=’图片路径’,sizingMethod=’设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式’);

参数说明:
enabled :可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
注:该项一般可以省略不写。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop :剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。[自己的体会是,如果padding 和margin的大小不适中的的话,那么背景图片会被撑大。相当于background-repeat。]
注:强烈建议加上该属性,并使用“crop”属性值,去掉sizingMethod=’crop’属性或者其使用其他属性值后边框等表现会在ie6下发生异常

src :必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。
注:建议使用绝对路径,使用相对路径的时候需要注意,该路径是相对于HTML文件的相对路径,而不是相对于css文件的相对路径。

还有使用该方法是需要在ie6下充值背景图片为none,即:_background:none;

如果你想像插入图片以上使用img插入的话,建议使用一张全透明的png8或者gif(推荐使用gif,文件体积小)插入,然后使用在透明图片上使用背景。

这些可以查看demo:https://www.html.cn/demo/png_exp/png.html

关于使用滤镜filter后背景上边的文字链接/按钮失效的方法:

在文字链接/按钮加上position:relative;

png的优化:

还是推荐2篇文章:http://www.csspeople.cn/?p=86http://www.csspeople.cn/?p=136

赞(0) 打赏
未经允许不得转载:WEB前端开发 » png那些事儿

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    png 8的alpha透明其实很好玩的。
    http://blog.dmtuan.com/?p=209

    啄米鸟9年前 (2009-11-19)回复
  2. #-48

    感谢分享
    ps:用firework和ps压缩同一张图片
    fw能压缩得更小

    air9年前 (2009-11-24)回复
  3. #-47

    一直使用图片都是按照默认的参数保存的,
    对这些png参数还是不太明白,在具体使用的时候都会有什么样的限制呢?什么样的情况用什么样的参数比较合适呢?

    tina9年前 (2009-11-24)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏