Webkit&x2B；jQuery+；SuperBGImage：完整的浏览器图像，而不是抗锯齿

此图最能说明问题：

我正在自定义使用SuperBGImage的WordPress主题。在Safari 5.1和Chrome 13中，调整浏览器窗口的大小时，图像不会平滑地消除锯齿，并且工件清晰可见。您可以随时将SuperBGImage演示与生产站点进行比较

vs

我在WordPress网站（个人分类）上添加了演示图片，以便直接比较。樱桃的形象最为明显

我已经为此工作了一段时间，并尝试了以下几点，但都没有成功：

尝试在幻灯片图像中添加2px边框，这解决了CSS3转换中一个几乎不相关的问题

还原了缩放算法，我对其进行了修改，从不裁剪图像

添加了与演示中使用的完全相同的图像文件

尝试添加一个

框阴影来触发平滑

所有的差异都修改了JS和CSS，试图找到一个潜在的疏忽。（

图像渲染：optimizeQuality；

和

-ms插值模式：双三次；

始终保持不变

确认SuperBGImage在jQuery 1.3.2（演示版）和1.6.2（项目版）中按预期工作

构建了一个简化的演示，并确认问题不在于我修改的SuperBGImage JS（唯一的区别是裁剪方法）

在观看SuperBGImage演示时，您会注意到在释放调整后的窗口大约半秒后会发生平滑。虽然我的项目中没有这种细微的变化，但它过去一直在工作。有人知道是什么导致了这种差异吗

与大多数项目不同，遗憾的是，我在源代码管理中没有这一点，所以我不能通过修订来隔离问题

---

对于那些想要摆弄简单演示的人：

答案是使用CSS3属性：

-webkit优化质量

这是正确的解决方案，尽管出于以下原因它可能有效，也可能无效：

• 直到最近，插值质量才被视为一个实现细节（这意味着浏览器可能有随机结果，并且根据标准机构的规则是有效的）

• 这一特性得到了艺术家们的大力支持，实际上是因为他们希望能够关闭像素艺术的高质量缩放功能。经过一年多的争论，每个人都同意了这一点

• webkit补丁在2011年5月刚刚签入以支持此功能，因此您的用户在Safari更新中实际使用它需要一段时间

IE和Firefox在专有CSS属性下已经有了一段时间的工作解决方案

最终，该属性将删除webkit前缀，并成为所有浏览器的标准

如果您想了解开发背后的血淋淋的细节，请参阅以下线程：

---

在我的浏览器上（chrome13 linux版），背景图像是抗锯齿的谢谢，佩德罗。可能值得注意的是，到目前为止，我只在Mac running Lion上进行了测试。你的背景图像在演示和WP示例中都是抗锯齿的？是的，而且小提琴演示看起来也很棒，情节变厚了。谢谢你，先生。在windows 2008上，没有看到与FF或WP有任何明显的区别调整大小时，两个网站之间的Chrome。谢谢你的回答，尽管我仍然不确定这与两个例子之间的差异有什么关系。也许处于边缘只会带来模糊的渲染问题。既然这显然不是任何标准的一部分，在哪里可以找到这样一个属性的文档？谷歌搜索它让我回到了这一点s页面：（@Matt，现在它只记录在浏览器引擎开发人员论坛中，阅读标准文档并不有趣，随着时间的推移，还会有更多的标准文档陆续出现。很多人对这种“小”质量问题并不在意，但看起来我们中的一些人希望这样做是一致和正确的。