html - 非平方PNG图像作为IE8中的背景图像问题

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

这是工作。你只是觉得不是。

IE 8 ( http://caniuse.com/#search=background-size )不支持背景大小；

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

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

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