Question

这段代码有什么问题？缩放转换效果在Internet Explorer 10或11中不起作用（在其他浏览器中为OK）。

<div class="image"></div>

.image {
    width:300px;
    height:200px;
    background: url("http://lorempixel.com/300/200");
    background-position:center;
    background-size:100%;
    transition: background-size 1s ease;
    -moz-transition: background-size 1s ease;
    -o-transition: background-size 1s ease;
    -webkit-transition: background-size 1s ease;
} 
.image:hover {
     background-size:150%;
}

在我看到here时，

背景大小过渡应该适用于IE10 / 11 我的错在哪里？
I made a Codepen here

Answer 1

IE似乎不支持后台大小转换百分比。奇怪... 所以我们将使用SCALE而不是百分比背景大小。这是正确的代码：

<div class="image-box">
    <div class="image">
    </div>
</div>  

.image-box{
    width:300px;
    overflow:hidden;
}
.image {
    width:300px;
    height:200px;
    background: url("http://lorempixel.com/300/200");
    background-position:center;
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
} 
.image:hover {
    transform: scale(2);
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
   -ms-transform: scale(2); /* IE 9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=2, M12=0, M21=0, M22=2, SizingMethod='auto expand')"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=2, M12=0, M21=0, M22=2, SizingMethod='auto expand'); /* IE6 and 7 */ 
}

And the updated Codepen here

背景大小的过渡在IE10 / 11中不起作用

1 个答案: