CSS 如何使背景大小在 IE 中工作？

How do I make background-size work in IE?

提问by JD Isaacks

Is there any known way to make the CSS style background-sizework in IE?

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

回答by Dan

A bit late, but this could also be useful. There is an IE filter, for IE 5.5+, which you can apply:

有点晚了，但这也可能有用。有一个 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')";

However, this scales the entire image to fit in the allocated area, so if you're using a sprite, this may cause issues.

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

Specification: AlphaImageLoader Filter @microsoft

规范：AlphaImageLoader 过滤器@microsoft

回答by Louis-Rémi

I created jquery.backgroundSize.js: a 1.5K jquery plugin that can be used as a IE8 fallback for "cover" and "contain" values. Have a look at the demo.

我创建了jquery.backgroundSize.js：一个 1.5K 的 jquery 插件，可以用作“cover”和“contain”值的 IE8 后备。看看演示。

回答by Scott Dallas

Thanks to this post, my full css for cross browser happiness is:

感谢这篇文章，我的跨浏览器幸福的完整 css 是：

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

It's been so long since I've worked on this piece of code, but I'd like to add for more browser compatibility I've appended this to my CSS for more browser compatibility:

我已经很久没有处理这段代码了，但我想添加更多浏览器兼容性我已将它附加到我的 CSS 以获得更多浏览器兼容性：

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

回答by Dorian

There is a good polyfill for that: louisremi/background-size-polyfill

有一个很好的polyfill：louisremi/background-size-polyfill

To quote the documentation:

引用文档：

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);
}

将 backgroundsize.min.htc 以及 .htaccess 上传到您的网站，该文件将发送 IE 所需的 mime 类型（仅限 Apache — 它内置于 nginx、node 和 IIS）。

在 CSS 中使用 background-size 的任何地方，都添加对此文件的引用。

.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);
}

回答by metatron

Even later, but this could be usefull too. There is the jQuery-backstretch-plugin you can use as a polyfill for background-size: cover. I guess it must be possible (and fairly simple) to grab the css-background-url property with jQuery and feed it to the jQuery-backstretch plugin. Good practice would be to test for background-size-support with modernizr and use this plugin as a fallback.

甚至更晚，但这也可能有用。有 jQuery-backstretch-plugin 可以用作 background-size:cover 的 polyfill。我想一定可以（并且相当简单）使用 jQuery 获取 css-background-url 属性并将其提供给 jQuery-backstretch 插件。好的做法是使用 Modernizr 测试背景大小支持并将此插件用作后备。

The backstretch-plugin was mentioned on SO here.The jQuery-backstretch-plugin-site is here.

在这里提到了 backstretch-plugin 。 jQuery-backstretch-plugin-site is here。

In similar fashion you could make a jQuery-plugin or script that makes background-size work in your situation (background-size: 100%) and in IE8-. So to answer your question: Yes there is a way but atm there is no plug-and-play solution (ie you have to do some coding yourself).

以类似的方式，您可以制作一个 jQuery 插件或脚本，使背景尺寸在您的情况下（背景尺寸：100%）和 IE8- 工作。所以要回答你的问题：是的，有一种方法，但 atm 没有即插即用的解决方案（即你必须自己做一些编码）。

(disclaimer: I didn't examine the backstretch-plugin thoroughly but it seems to do the same as background-size: cover)

（免责声明：我没有彻底检查 backstretch-plugin，但它似乎与 background-size: cover 一样）

回答by Jana

In IE11 Windows 7 this worked for me,

在 IE11 Windows 7 这对我有用，

background-size: 100% 100%;

回答by Jana

you can use this file (https://github.com/louisremi/background-size-polyfill“background-size polyfill”) for IE8 that is really simple to use:

您可以将此文件（https://github.com/louisremi/background-size-polyfill“background-sizepolyfill”）用于 IE8，它非常易于使用：

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

回答by Bulla

I tried with the following script -

我尝试使用以下脚本 -

.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;
}

It worked for me!

它对我有用！