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