IE 10 中背景大小的 css 过渡

Posted 2023-03-06

【中文标题】IE 10 中背景大小的 css 过渡

【英文标题】：css transition of background-size in IE 10

【发布时间】：2013-05-29 08:29:18

【问题描述】：

是否可以让背景大小的过渡在 IE 10 中工作？它适用于 webkit 和 moz，但不适用于 IE 10。很难 IE 转换我表示的所有其他内容，它还改变了背景大小，但没有转换。

a 
    background: url("../image.png") no-repeat scroll 0 0 transparent;

    background-size: 302px auto;
    -webkit-background-size: 302px auto;
    -moz-background-size: 302px auto;    
    -ms-background-size: 302px auto;

    transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -moz-transition: all 0.3s ease-in 0s;
    -ms-transition: all 0.3s ease-in 0s;

    height: 83px;
    margin: 0 0 0 8px;
    width: 302px;




a:hover 
    background-size: 324px auto;
    -webkit-background-size: 324px auto;
    -moz-background-size: 324px auto;    
    -ms-background-size: 324px auto;

    box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);

    height: 89px;
    margin: 9px 0 0 -4px;
    width: 324px;

感谢您的帮助！

【问题讨论】：

这是纯 css 还是您在这里使用 less 之类的东西？

哦，对不起，是的。 .transition 和 .background-size 是 mixins。我会在后面改变它。

顺便说一句，从来没有-ms-transition。从 IE10 开始支持标准属性。

background-size 不是 IE 中的动画属性：msdn.microsoft.com/library/dn254934(v=vs.85).aspx

【参考方案1】：

感谢我的一个朋友，我找到了另一种方法来实现我想要的结果。我只是让背景大小为 100%，也不改变宽度或高度；相反，我通过使用变换来调整大小。即使在 IE10 中也可以转换转换。

a 
    background: url("../image.png") no-repeat scroll 0 0 transparent;

    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;    
    -ms-background-size: 100% 100%;

    transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -moz-transition: all 0.3s ease-in 0s;
    -ms-transition: all 0.3s ease-in 0s;

    margin: 0 0 0 8px;
    height: 83px;
    width: 302px;



a:hover 

    transform: scale(1.072,1.072);
    -webkit-transform: scale(1.072,1.072);
    -moz-transform: scale(1.072,1.072);
    -ms-transform: scale(1.072,1.072);

    box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 2px 8px 6px 3px rgba(0, 0, 0, 0.5);

    margin: 9px 0 0 8px;

在带有 -o- 前缀的歌剧中也可以正常工作。在 IE9 中它仍然可以，那里没有过渡，但其他一切正常。

只是想分享一下，也许有人有同样的问题。

【参考方案2】：

抱歉，IE10 似乎不支持背景大小作为过渡属性。过渡只会失败，但它应该优雅地降级。