03月31, 2012

如何弱化全透明图片在浏览器中的锯齿

这2天又有童鞋遇到有大量半透明应用的需求。现在先不讨论这种需求的合理性及其它方面的事情,先看看如何解决IE6下不支持半透明图片方案吧。我记得08年的时候写过一篇相关的博客,重发一遍: 【原文地址:http://blog.doyoe.com/article.asp?id=164

2008-04-06

对于不支持半透明的gif图片格式,我们想要在web中表现半透明效果时,只能将其转换成支持透明的PNG格式;然而转换为PNG格式后,IE6及以下浏览器又不能直接支持(可以用滤镜方式解决,但不推荐),让人又一次无语。

那有什么办法让没有背景的gif图像在web 中不出现锯齿呢?没有完美的方法,只有一些可以将就着用的方案。

其一,我以前会用的方法:描边——给无背景的图片描上和这张图片将要放在web中的那个位置的背景色相同或相近的颜色。这其实也算是一个可以将就的解决方案了,不过稍嫌有点麻烦。

其二,我现在会使用的方法:在保存无背景的gif图片时,选择“杂边”为“自定...”,然后在“自定...”里选择和这张图片将要放在web中的那个位置的背景色相同或相近的颜色,保存完成,OK!

其三,在保存无背景的gif图片时,选择为“存储为web所用格式”,然后在所弹出的面板里做和方法二类似的操作。选择“杂边”为“其它...”,然后在“其它...”里选择和这张图片将要放在web中的那个位置的背景色相同或相近的颜色,保存完成,OK!

至于PNG8的全透明处理方式可以与第三点一致。

除了以上这三种可以将就使用的方法,不知哪位同学还有更好的方案,交流一下。

题外话:对于大量的半透、阴影、圆角之类的,对于前端工程师来说都应该学会3件事:

  • 影响:跟设计师及产品陈述这些实现的成本及复杂性,分析这些锦上添花的东西是否有不错的加分,如果加分很多,可以考虑酌情实现,如果加分不明显,推荐换一种设计表现方式,据理力争的次数多了,自然就会在设计及产品那里留下深刻的印象,影响他们下次的决定
  • 学会拒绝:我反对对所有的东西都全盘接受,应该学会拒绝,合理的拒绝一些东西,因为你这次一旦接受了所有的东西,那可能下次,下下次就无止境了
  • 学会实现:对已经定下的东西,接下去要做的就是实现,我们得总结和探索更多的实现或者变通实现的方案

本文链接:https://75team.com/post/如何弱化全透明图片在浏览器中中的锯齿.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。