这段代码有什么问题?缩放过渡效果在 Internet Explorer 10 或 11 中不起作用(在其他浏览器中正常)。
<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%;
}
背景大小过渡应该适用于IE10/11,正如我在这里看到的
我的错误在哪里?
我在这里做了一个代码笔
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 */
}
和更新的代码笔在这里