background-size的过渡效果不好

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%;

it will work

JSFiddle

有一些关于background-size: cover替代方案的其他问题，可以帮助是否有替代background-size:cover?

或者一些不同的解决方案，像这样的问题:

Answer 2

你打错字了:

.item-one { 
...
-o-transition: background-size 1500 linear
...
}

---

工作版本:

.item-one {
    background-size: 50%;
    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: 100%;
}

可以正常工作，因为'background-size:cover':

    **‘cover’:**
    Scale the image, while preserving its intrinsic 
    aspect ratio (if any), to the smallest size such 
    that both its width and its height can completely
    cover the background positioning area.

Answer 3

尝试使用transform: scale(150%)为item-one和容器设置特定的大小和overflow: hidden;

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

css:

 .container {
    overflow: hidden;
  }
  .item-one:hover {
   transform: scale(150%);
  }