如何在IE中制作背景大小的工作？

Question

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

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过滤器@microsoft

Answer 2

我创建了jquery.backgroundSize.js:一个1.5K jquery插件,可以用作"封面"和"包含"值的IE8后备.看看演示.

Answer 3

感谢这篇文章,我对跨浏览器幸福的全面了解是:

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

Answer 4

甚至更晚,但这也很有用.有一个jQuery-backstretch-plugin,你可以用作背景大小的polyfill:cover.我想用jQuery抓取css-background-url属性并将其提供给jQuery-backstretch插件一定是可能的(并且相当简单).好的做法是使用modernizr测试背景大小支持,并使用此插件作为后备.

这里提到了backstretch-plugin .这个jQuery-backstretch-plugin-site就在这里.

以类似的方式,您可以制作一个jQuery插件或脚本,使背景大小适合您的情况(背景大小:100%)和IE8-.所以回答你的问题:是的,有一种方法,但是没有即插即用的解决方案(即你必须自己做一些编码).

(免责声明:我没有彻底检查backstretch-plugin,但它似乎与背景大小相同:封面)

Answer 5

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

引用文档:

将backgroundsize.min.htc上传到您的网站,以及将发送IE所需的mime类型的.htaccess(仅限Apache - 它内置于nginx,节点和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);
}