5

是否可以将背景大小转换为在 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;
}

谢谢你的帮助！

4

2 回答 2

4

感谢我的一个朋友，我找到了另一种方法来实现我想要的结果。我只是让背景大小为 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 中它仍然可以，那里没有过渡，但其他一切正常。

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

于 2013-06-03T12:10:41.737 回答
1

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

于 2013-06-03T10:10:52.977 回答