http://www.css88.com/archives/2018 专注前端开发，关注用户体验 Fri, 10 Feb 2012 10:58:56 +0000 hourly 1 http://wordpress.org/?v=3.3 http://www.css88.com/archives/2018/comment-page-1#comment-2220 png那些事儿 | 古汉台UI Wed, 25 Nov 2009 21:46:13 +0000 http://www.css88.com/?p=2018#comment-2220 [...] 首先请大家请给PNG8一个机会： 全透明的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透明？ 其实这个问题根本就不用回答，这个可能跟每个人使用切图软件有关。 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：http://www.css88.com/demo/png_exp/png.html 关于使用滤镜filter后背景上边的文字链接/按钮失效的方法： 在文字链接/按钮加上position:relative; png的优化： 还是推荐2篇文章：http://www.csspeople.cn/?p=86，http://www.csspeople.cn/?p=136 From – http://www.css88.com/archives/2018 [...] [...] 首先请大家请给PNG8一个机会： 全透明的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透明？ 其实这个问题根本就不用回答，这个可能跟每个人使用切图软件有关。 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：http://www.css88.com/demo/png_exp/png.html 关于使用滤镜filter后背景上边的文字链接/按钮失效的方法： 在文字链接/按钮加上position:relative; png的优化： 还是推荐2篇文章：http://www.csspeople.cn/?p=86，http://www.csspeople.cn/?p=136 From – http://www.css88.com/archives/2018 [...]

]]> http://www.css88.com/archives/2018/comment-page-1#comment-2208 tina Tue, 24 Nov 2009 15:16:09 +0000 http://www.css88.com/?p=2018#comment-2208 一直使用图片都是按照默认的参数保存的， 对这些png参数还是不太明白，在具体使用的时候都会有什么样的限制呢？什么样的情况用什么样的参数比较合适呢？ 一直使用图片都是按照默认的参数保存的，
对这些png参数还是不太明白，在具体使用的时候都会有什么样的限制呢？什么样的情况用什么样的参数比较合适呢？

]]> http://www.css88.com/archives/2018/comment-page-1#comment-2203 air Tue, 24 Nov 2009 07:21:51 +0000 http://www.css88.com/?p=2018#comment-2203 感谢分享 ps:用firework和ps压缩同一张图片 fw能压缩得更小 感谢分享
ps:用firework和ps压缩同一张图片
fw能压缩得更小

]]> http://www.css88.com/archives/2018/comment-page-1#comment-2135 啄米鸟 Thu, 19 Nov 2009 02:24:38 +0000 http://www.css88.com/?p=2018#comment-2135 png 8的alpha透明其实很好玩的。 http://blog.dmtuan.com/?p=209 png 8的alpha透明其实很好玩的。
http://blog.dmtuan.com/?p=209

]]>