背景大小的过渡效果无法实现

Question

我正在尝试对悬停时的背景图像进行过渡效果。 目前这是我的代码：

HTML

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

CSS

->

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

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

- Sonic750

---

正如@fsn所提到的，你在第8行缺少了分号。 - areim

Answer 1

我认为问题出在background-size: cover，如果你将其改为

background-size: 100%;

它会有效果

JSFiddle

还有一些关于 background-size: cover 的替代方案的问题，可以帮助解决：是否有 background-size:cover 的替代方案？

或者针对这种问题的其他解决方案：CSS3 当使用 cover 时交叉淡化背景图像

- areim

---

似乎在Chrome中无法正常工作，这就是为什么我认为我的项目没有工作的原因，还有你的JS Fiddle链接。Firefox可以正常显示，但Chrome没有过渡效果。 - Lee

如果你想让它在Chrome中工作，你需要给出两个参数。就像这样 background-size:100% 100%; - Carle B. Navy

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.

- fsn

Answer 3

尝试使用 transform: scale(150%) 对 item-one 进行缩放，对容器设置特定大小和 overflow: hidden;

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

样式表：

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

- Guillermo Gutiérrez