如何让background-size在IE中生效？

Question

有没有已知的方法可以使CSS样式background-size在IE中工作？

- JD Isaacks

---

你想获得什么效果？ - ZippyV

@ZippV 我有一个宽约250像素的div。但背景图像宽度为300像素。我希望背景图像完全适应（background-size:100%），以便不被裁剪。然后在:hover时，我希望背景大小更改为完整的300像素宽度（background-size:auto），以创建缩放的 illution. - JD Isaacks

你可以使用img标签来实现相同的效果。如果需要在其上方添加任何内容，请使用z-index。 - ZippyV

@John 如果Dan的解决方法对你有用的话，考虑更改接受的答案！ - Pekka

@ZippyV IMG标记有时会产生不必要的副作用，例如它可以被选择或右键单击。这些情况有时候是可以接受的，有时候却不行。 - peterh

只需将您的背景图像与容器保持相同的纵横比，这样就可以正常工作了（目前在IE 10+上。使用具有边框半径的容器时也会遇到相同的问题。 - mars-o

Answer 1

有点晚了，但这也可能是有用的。有一个IE过滤器适用于IE 5.5+，可以应用它：

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

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

然而，这会将整个图像缩放以适应分配的区域，因此，如果您正在使用精灵图，这可能会导致问题。

规范：AlphaImageLoader Filter @microsoft

- Dan

---

我在想为什么微软不直接使用CSS来实现那个功能。非常感谢！ - Martin Andersson

请问哪些IE版本支持此功能？ - ՕլՁՅԿ

如果您在我们定义的元素内使用链接和按钮，这些链接和按钮将无法正常工作。有人知道修复此问题的方法吗？ - rubyprince

缩放方法不能保持比例，因此最好确保您的元素与图像具有相同的比例。 - Yves Van Broekhoven

值得注意的是，如果应用于body或html元素，则该属性可能会破坏滚动、链接和其他页面交互。 - SouthShoreAK

Answer 2

我创建了jquery.backgroundSize.js，这是一个1.5K的jQuery插件，可用作IE8中“cover”和“contain”值的备选方案。请查看演示。

- Louis-Rémi

---

根据jquery.backgroundSize.js的文档，该插件已过时，他们建议使用background-size-polyfill代替。 - VOIDHand

更新版本不支持 background-position: fixed。 - Ryan Burney

@VOIDHand，筛选器和填充物都对我没用，我使用jquery.backgroundSize成功了。 - Chris Marisic

Answer 3

多亏了这篇文章，我现在拥有了跨浏览器兼容的完整CSS：

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

虽然我已经很久没有处理这段代码了，但我想为了更好的浏览器兼容性，在我的CSS文件末尾添加了以下内容：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

- Scott Dallas

---

@Gaurav123 请尝试使用-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;。 - honk31

这会导致我的IE8显示背景图片两次 - 一次是缩放后的尺寸，另一次是未调整大小的大背景。 - arekk

ie7：看起来还好，但是无法再点击链接了。（为什么是ie7？政府网站更新很慢） - Robbie Matthews

Answer 4

有一个很好的polyfill可用于此：louisremi/background-size-polyfill

引用文档：

Upload backgroundsize.min.htc to your website, along with the .htaccess that will send the mime-type required by IE (Apache only — it's built in nginx, node and IIS).

Everywhere you use background-size in your CSS, add a reference to this file.

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

- Dorian

---

这个polyfill非常好用，可以在IE8中实现background-size:cover或contain的效果，无需任何麻烦。 - jimlongo

这种方法支持contain和cover。它包含5.7KB，因为它可以在一个网络数据包中传输，所以并不算太糟糕。 - S.M.Mousavi

Answer 5

即使稍晚些，但这也可能很有用。您可以使用jQuery-backstretch插件作为background-size: cover的polyfill。我想使用jQuery获取css-background-url属性并将其提供给jQuery-backstretch插件是可能的（而且相当简单）。好的做法是使用modernizr测试background-size-support，将此插件用作后备方案。

backstretch-plugin在SO上提到here。jQuery-backstretch-plugin-site在此处。

类似地，您可以制作一个jQuery插件或脚本，使背景大小在您的情况下起作用（background-size：100％），并在IE8-中起作用。所以回答您的问题：是有方法的，但目前没有即插即用的解决方案（即您必须自己编写一些代码）。

（免责声明：我没有仔细检查backstretch-plugin，但它似乎与background-size：cover相同）

- metatron

Answer 6

在IE11 Windows 7中，以下方法对我有效：

background-size: 100% 100%;

- Janardhan

Answer 7

我尝试了以下脚本 -

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

它对我有用！

- Bulla

---

针对哪个版本？ - nihiser

Answer 8

你可以使用这个文件(https://github.com/louisremi/background-size-polyfill “background-size polyfill”)来解决IE8中的背景大小问题，它非常简单易用：

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}

- user5251472