css - Internet Explorer 双三次背景图像重新缩放

Question

我在使用 background: 和 background-size: 属性缩小 CSS 背景图像时遇到了一些麻烦，如下所示

.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 似乎使用最近邻而不是双三次缩小图像。我知道曾经有一个黑客通过使用 -ms-interpolation-mode: bicubic;，但现在已经弃用了。

有人知道如何在 IE 中很好地缩小背景图像吗？

我还应该补充一下为什么我要制作背景图片而不是普通图片:这样我就可以在网站处于窄视口(viewport)(例如移动设备)时使用媒体查询来显示不同的图片。

谢谢!

Answer 1

最好(也可能是唯一)的方法是调整 .png 文件的大小。没有理由使用文件大小约为 85KB 的 2808x1024 png，当您可以将文件大小调整为 550x201px 时，它将有 ~15KB 并且可以很好地呈现。只需使用@media 查询即可在不同分辨率的 png 之间切换。