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

See JSFIDDLE

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

Answer 1

我认为问题在于background-size: cover，当您将其更改为

时

background-size: 100%;

它会起作用

JSFiddle

还有一些关于background-size: cover替代方案的其他问题，可以帮助Is there an alternative to 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%;
}

工作正常，在“背景大小：封面”之前没有被讽刺：

    **‘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.

背景大小的过渡不起作用

2 个答案: