IECSSBug系列：PNG图像与背景颜色错配

影响版本

创新互联网站建设服务商，为中小企业提供网站设计制作、成都网站设计服务，网站设计，网站托管维护等一站式综合服务型公司，专业打造企业形象网站，让您在众多竞争对手中脱颖而出创新互联。

该bug出现在:IE8,IE7,IE6

表现

即使使用同样的颜色代码，CSS里指定的颜色会与PNG图像里使用的颜色不同。

教程日期

2009.08.09 07:07:46 星期日

描述

你制作了一个Logo或某些高端洋气的艺术图并将其保存为PNG图片。然后你把它作为背景（或者一个正常图像）并用与此图片中一样的颜色将其包围起来。但很可惜的是，它们在IE中显示出完全不同的色调（有人说这也会出现在Mac系统中的safari浏览器，我没Mac没法测试），让我们来看看：

演示

由于该bug的天然特性，这个演示在一个单独的页面上

HTML Code

CSS Code：

 
 
 

  
  
  
div { 
  
  
  
    width: 500px; 
  
  
  
    height: 500px; 
  
  
  
    background: #74822D url(pngcrush.png) no-repeat center; 
  
  
  
} 
 
 
 

这个“bug”有意思的地方是，它并不是个真正的bug:)，这是一个特性！更有意思的是，我发现人们开始在找“网站安全色”，要是颜色不对，就觉得他们自己用“错”了颜色。不管怎样，空谈已经太多了，让我们来解决掉这个破事儿：

解决方案

以下是针对上面所说的bug的解决方案，按照解决方案的类型排列

方案（伪bug）

解决日期

2009.08.09 07:22:32 星期日

修复版本

所有受影响的版本

描述

当我说它是一个功能而不是bug的时候，我的意思是：IE浏览器是支持“PNG咖玛轮廓”的。我找到过一个页面似乎也在讨论这个问题： The Sad Story of PNG Gamma ”Correction” by Henri Sivonen。对于这个bug，我们的解决方案是简单地从PNG图片里删除咖玛轮廓，来看看修复后的演示：

由于bug的天然特性，演示展示在单独的页面上查看。

HTML Code：

CSS Code：

 
 
 

  
  
  
div { 
  
  
  
    width: 500px; 
  
  
  
    height: 500px; 
  
  
  
    background: #74822D url(pngcrush_fixed.png) no-repeat center; 
  
  
  
} 
 
 
 

我们的代码保持不变。我所做的是用pngcrush程序（注1）来修复图片。在这里我要指出的是，你可以从一开始就设置你的编辑器使其不保存咖玛轮廓。看起来会在默认情况下调皮地保存这些轮廓的编辑器只有Photoshop；因为我是一个开心的Gimp用户，我自己的PNG图片没有这样的问题，但这也意味着我并不能教你如何去配置photoshop不去保存这些轮廓。

不管怎样，pngcush也会减少图片的大小，所以为什么不试一下呢。 我用来修复演示图片的命令是这样 的：pngcrush -brute_force -rem gAMA -rem cHRM -rem sRGB -rem iCCP pngcrush.png pngcrush_fixed.png。 其中的参数解释已经超出了本教程的范畴 –还是去读那些操蛋的手册吧。

在Ubuntu系统中，pngcrush可以从Universe repos库里获取： sudo apt-get install pngcrush

注1：pngcrush 是一个用来批量压缩 PNG 格式图片的工具

网站栏目：IECSSBug系列：PNG图像与背景颜色错配
分享路径：http://www.mswzjz.com/qtweb/news4/175604.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联