非平方PNG图像作为IE8中的背景图像问题答案

【问题标题】：Non-squared PNG images as background image issue in IE8非平方PNG图像作为IE8中的背景图像问题
【发布时间】：2013-03-27 22:31:54
【问题描述】：

在我的website（仅用于测试）中，我在#title 的标题旁边添加了一个背景图像作为徽标。它在 Chrome 和 firefox 中运行良好，但在 IE8 中却不行。

当我尝试将jpg 格式图像添加为徽标时，它在 IE8 中运行良好。然后我尝试使用一个平方的 png 图像，它也可以工作。

然后我意识到如果我使用如下所示的非平方图像，IE8 将无法正常工作：

无论如何让它在 IE8 中工作？

【问题讨论】：

【解决方案1】：

问题是因为 IE8 不支持 CSS background-size 属性。

如果你想支持 IE8 并且你想使用背景图片，你需要提供一个真正适合你给它的空间的图片，而不是让浏览器为你缩放它。

另一种方法是将其作为前景图像放在<img> 标记中，而不是背景图像。这将允许它被缩放。

【讨论】：

【解决方案2】：

它正在工作。你只是认为不是。

因此，它使用图像的大小（800x800）。您正在查看图像。只是您看到的是图像的左上角，恰好是透明的。

想明白我的意思吗？打开你最喜欢的现代浏览器，打开你的检查器工具，然后删除 background-sizing 属性。 “图像去哪儿了？”它还在那里。现在，让 logo div 更大：实际上是 800x800。图像回来了。您基本上模拟了 IE8 如何显示图像（而不是调整 div 部分的大小）。

既然您知道您希望徽标的大小，只需使用适当大小的图像，您实际上不需要 background-size 属性。

【讨论】：