Internet Explorer双三次插值背景图像重新缩放

Question

我在使用background和background-size属性对CSS背景图片进行缩放时，遇到了IE的一些问题，具体如下：

.llifLogo {
background: url(images/llifmonotagline.png) no-repeat center;
background-size: 550px;
position: absolute;
top: 60px;
width: 100%;
height: 170px;

}

该网站已经上线在http://llif.co.uk。在其他浏览器中展示效果非常好，但是IE浏览器似乎使用最近邻插值法而不是双三次插值法来缩小图像。我知道曾经有一个hack方法可以使用-ms-interpolation-mode: bicubic;，但这个方法现在已经被弃用。

有没有任何想法如何在IE中优雅地缩小背景图片？

我还要补充为什么要使用背景图片而不是普通的图片：这样我就可以使用媒体查询在窄视口（如移动设备）下显示不同的图片。

谢谢！

- shankie_san

---

你的链接无法打开。你能分享一些你的用户界面设计截图吗？ - Ghost Answer

谢谢@GhostAnswer - 应该是http://llif.co.uk - shankie_san

你看过MDN上的图像渲染文章了吗？似乎里面有很多内容可以帮助你解决特定问题。 - Benjamin Solum

Answer 1

最好（也可能是唯一）的方法是调整你的.png文件大小。 没有理由使用大小约为85KB的2808x1024 png，而你可以将文件调整为550x201px，它将有大约15KB并且会被很好地渲染。只需使用@media查询在不同分辨率的png之间切换即可。

- BorisTB