Question

是否可以在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;
}

谢谢你的帮助！

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

在opera中使用-o-前缀也很好。在IE9中它仍然可以，没有过渡，但其他一切都有效。

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

Answer 2

我很抱歉，但似乎IE10不支持background-size作为过渡属性。过渡只会失败，但它应该优雅地降级。

IE 10中背景大小的css转换

2 个答案: