背景大小的过渡不起作用

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

你打错了：

.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 2

我认为问题出在 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 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%);
  }

背景大小的过渡不起作用

Transition on background-size doesn't work

css

css-transitions

background-size