css - 背景大小的转换不起作用

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 crossfade bg image when cover is used

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.