背景大小的过渡不起作用

Question

我正试图在悬停时对我的背景图像进行转换.这是我的代码到目前为止:

HTML

<div class="item-one"></div>

CSS

.item-one { 
    height: 345px;
    width: 256px;    
    background: url('http://placehold.it/256x345') scroll no-repeat center center;
    background-size: cover;
    -webkit-transition: background-size 1500ms linear;
    -moz-transition: background-size 1500 linear;
    -o-transition: background-size 1500 linear
    -ms-transition: background-size 1500ms linear;
    transition: background-size 1500ms linear;
}

.item-one:hover {
    background-size: 150%;  
}

请参阅JSFIDDLE

但这对我不起作用,在不同的浏览器中测试过.其他过渡如背景颜色按预期工作.此属性的转换是否有任何限制？

Answer 1

我认为问题在于background-size: cover,当你改变它时

background-size: 100%;

它会工作

的jsfiddle

还有一些关于background-size: cover替代方案的问题,可以帮助是否有替代背景大小:覆盖？

或者对于这样的问题有一些不同的解决方案: 使用封面时CSS3交叉淡化bg图像