如何在 IE 中使用背景大小？

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

250870 次浏览
小开
最佳答案

有点晚了，不过这个也有用。有一个 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

小开

甚至更晚，但这也可能是有用的。你可以使用 jQuery-backpull-plugin 作为后台大小: 覆盖的填充。我想，使用 jQuery 获取 css-back-url 属性并将其提供给 jQuery-backpull 插件一定是可能的(并且相当简单)。良好的实践应该是使用 Modern izr 测试对后台大小的支持，并使用这个插件作为备用。

在 SO给你.jQuery-backretch- 插件站点是 给你。

类似地，你可以创建一个 jQuery 插件或脚本，让后台大小适用于你的情况(后台大小: 100%)和 IE8-。所以回答你的问题: 是的，有一个方法，但 ATM 没有即插即用的解决方案(即你必须自己做一些编码)。

(免责声明: 我没有彻底检查的延伸插件，但它似乎做了同样的背景大小: 封面)

小开

我创建了 背景大小: 一个1.5 K 的 jquery 插件，可以用作 IE8的“ cover”和“ include”值的备份。看看 小样。

小开

感谢这篇文章，我的跨浏览器快乐的完整 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;
小开

有一个很好的填充物: 路易斯雷米/背景大小聚填料

引用文件:

将 backoundsize.min.htc 上传到您的网站 . htaccess 将发送 IE (仅限 Apache)所需的 mime 类型 它内置在 nginx、 node 和 IIS 中)。

在 CSS 中使用背景大小的所有地方，添加对 这份文件。

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

你可以用这个文件 (https://github.com/louisremi/background-size-polyfill“背景大小的填充物”)对于 IE8来说，使用起来非常简单:

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

我尝试用下面的脚本-

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

我成功了！

小开

在 IE11的 Windows 7操作系统中，这对我很有用,

background-size: 100% 100%;

提交答案