Question

我知道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。

Answer 1

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

我能想到有两个符合该法案的内容：

其中，CSS3Pie涵盖的功能不仅仅是background-size，所以如果您还为渐变等做同样的filter样式会更好。另一个是一个-trick polyfill仅适用于此特定功能。

两者都知道效果很好，所以选择你喜欢的，然后扔掉那些丑陋的filter样式。

Answer 2

根据microsoft自己的文档sizingMethod='scale'

比例
拉伸或缩小图像以填充对象的边框。

正如您所看到的， scale 是一个很难选择使用的单词，因为它没有真正“缩放”它只是拉伸和/或缩小图像以适应其容器的边界。 / p>

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

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

.useBGImage {
    background-image: url('../img/BGImage.gif');  
    background-repeat: no-repeat;
    width: auto; /* required for IE8 */
    max-width: 100%;
    height: auto;
}

快乐的编码！

背景大小IE7＆amp; 8 CSS黑客攻击

2 个答案: