背景大小在 IE 中不起作用 [重复]

Posted 2023-03-06

【中文标题】背景大小在 IE 中不起作用 [重复]

【英文标题】：background-size doesn't work in IE [duplicate]

【发布时间】：2013-08-01 02:16:33

【问题描述】：

我正在使用 class 和 id（例如）在一个 div 上添加图片：

.icones  
    background: transparent url('../contents/homepage/60/icones.png') no-repeat;
    display: inline-block;
    width: 50px;
    height: 48px;
    background-size: 60px;

#contact 
    background-position: 0px -60px;

使用Chrome，一切正常，一切看起来都很好，所有属性都显示在element inspector中，但在IE中，出现了问题。

在IE 上使用开发人员工具检查页面时，我看到“background-size”没有出现。

我知道正是这个问题给我带来了麻烦，因为当我将其隐藏在 chrome 上时，我的页面与 IE 中的页面相同。

所以我的问题是：如何强制IE 应用此background-size？

谢谢！

编辑：

所以即使使用过滤器，它似乎也不起作用：

    .icones  
        background: transparent url('../contents/homepage/60/icones.png') no-repeat;
        display: inline-block;
        width: 50px;
        height: 48px;
        background-size: 60px;

        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale')";

#contact 
    background-position: 0px -60px;

解决方案：

手动编辑图片大小并忘记背景大小。一切都好！

【问题讨论】：

你的IE是什么版本的？

@clement，您的问题已经有了解决方案。检查上面的链接。下次你在 SO 中提出问题之前，请确保它之前没有被问过

@MrLister ：感谢您的建议，但我已经尝试过该解决方案：-/

@Anamaria ：谢谢，但暂时不起作用，我可能弄湿了，我编辑了我的初始帖子；-)

@Anamaria ：我的问题是关于背景大小！我在制作精灵之前调整了背景的大小！

【参考方案1】：

对于 IE，您必须使用特定的 css 过滤器：

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

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

或者使用jquery来实现效果，就像这个link解释的那样。

【讨论】：

谢谢安东尼奥。我做到了，但它似乎在我的项目中不起作用（请参阅我更新的初始帖子）