2

我知道 IE7 和 IE8 不支持背景大小。我也知道有一个使用 AlphaImageLoader 的解决方案，如下所示：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='image.gif', sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
             src='image.gif', sizingMethod='scale')";

但不幸的是它不起作用。有什么建议么？

这是我在 CSS 中的代码：

.useBGImage { 
    background-image: url('../img/BGImage.gif'); 
    background-size: 400px 50px; 
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='../img/BGImage.gif', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
                 src='../img/BGImage.gif', sizingMethod='scale')";
}

图片的原始尺寸为 400px * 70px。

4

2 回答 2

1

我的建议是使用可用的 polyfill 库之一来解决这个问题。

我能想到的有两个符合要求：

其中，CSS3Pie 涵盖的功能不仅仅是background-size.，因此如果您还filter为渐变等做类似的样式，那就太好了。另一个是仅针对此特定功能的一次性 polyfill。

两者都很好用，所以选择你喜欢的，扔掉那些丑陋的filter风格。

于 2015-10-24T20:31:00.617 回答
0

根据微软自己的文档sizingMethod='scale'

缩放
          拉伸或缩小图像以填充对象的边界。

正如您所看到的那样，缩放是一个不好的词选择，因为它并没有真正“缩放”它只是拉伸和/或缩小图像以适应其容器的边界。

为了有效地按比例缩放图像，建议您在 HTML 标记中删除图像的高度和宽度。

然后将其用作您的CSS ...

.useBGImage {
    background-image: url('../img/BGImage.gif');  
    background-repeat: no-repeat;
    width: auto; /* required for IE8 */
    max-width: 100%;
    height: auto;
}
于 2015-10-23T03:57:53.160 回答