png那些事儿

日期：2013-11-26  来源：攀枝花惠康网络公司

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

举荐两篇文章给巨匠：http://www.ued163.com/?p=640，http://www.ued163.com/?p=645

半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明，其它浏览器都能正常显示半透明。这个bug并不需要非凡看待，因为在不撑持半透明的浏览器下只是显示为全透明，对用户体验影响不年夜，它反而是透明gif的增强版。
第二个bug没有什么好的体例解决，只能经由过程影响机能的体例AlphaImageLoader与需要加非凡标签（VML）。

到底是png24 Alpha透明仍是png32 Alpha透明？

2.Fireworks

• Fireworks既能导出布尔透明的PNG8,也能导出alpha透明（）的PNG8,半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明.

• Fireworks能导出PNG24，可是和jpeg差不多，不能透明。

• Fireworks能导出alpha透明的PNG32。

今朝ie6下的png24 Alpha透明仍是png32 Alpha透明只能使用影响机能的AlphaImageLoader体例，即使良多人说的使用js其实也是使用了这个体例。
体例在css中使用：

其拭魅这个问题根柢就不用回覆，这个可能跟每小我使用切图软件有关。
true : 默认值。滤镜激活。

趁着小志的《css那些事儿》正火，引用一下问题，哈哈，傍年夜款。

首先请巨匠请给PNG8一个机缘：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=布尔值(Boolean),src=http://www.css88.com/archives/’图片路径’,sizingMethod=’设置或检索滤镜浸染的对象的图片在对象容器鸿沟内的显示体例’)；

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

sizingMethod : 可选项。字符串(String)。设置或检索滤镜浸染的对象的图片在对象容器鸿沟内的显示体例。

所以png24 Alpha透明或者png32 Alpha透明只是使用切图软件分歧，在浏览器中Alpha透明的。默示是一致的。

ie6下的png Alpha透明

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

png的优化：

1.Photoshop

• Photoshop只能导出布尔透明（全透明或者全欠亨明）的PNG8。

• Photoshop能导出alpha透明（全透明，全欠亨明，半透明）的PNG24。

• Photoshop不能导出PNG32。

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：http://www.css88.com/demo/png_exp/png.html

关于使用滤镜filter后布景上边的文字链接/按钮失踪效的体例：

仍是举荐2篇文章：http://www.csspeople.cn/?p=86，http://www.csspeople.cn/?p=136