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=’设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式’);

参数说明: 继续阅读

圆角头像的制作

好多sns的头像都使用圆角了,昨天在校内上看到了圆角头像,今天在Qzone的也看到了圆角头像,圆角头像看上去比直角的美观。

2009-08-19_1731512009-08-20_122313

圆角头像的制作原理就是在头像上覆盖一张透明的图片,把四个角颜色设置成页面的背景颜色,中间透明,

假设我的页面底色是纯黑色的,那么这个透明图片可以做成这样,如图:

2009-08-20_123344

这里需要注意的是需要把图片保存成24位的png,虽然IE6支持8位的png的透明,但是8位的png做透明圆弧图片存在效果上的问题,就是存在白色的杂边或锯齿,如图:

2009-08-20_124016 继续阅读

卸载adobe cs4后PNG图片无法显示问题

同事啄米鸟昨天发现一个奇怪的问题:就是在IE上是PNG的图片都不能显示了,将图片转化成.jpg或者.gif又是可以的,将图片方式我的本地又是正常的。显然是电脑问题了,经过他2天的折腾终于找到了原因。

原因:卸载adobe cs4的部分组件,比如ps cs4,ai cs4等;

解决方案: 继续阅读