背景大小的转换不起作用答案

【问题标题】：Transition on background-size doesn't work背景大小的转换不起作用
【发布时间】：2015-10-21 12:07:38
【问题描述】：

我正在尝试在悬停时在我的背景图像上放置一个过渡。到目前为止，这是我的代码：

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

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

【问题讨论】：

也正如@fsn 提到的，你在第 8 行缺少分号

标签： css css-transitions background-size

【解决方案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

【讨论】：

这似乎在 Chrome 中不起作用，这就是为什么我认为我自己的项目以及您的 JS Fiddle 链接不起作用的原因。 Firefox 让它显示正常，但 Chrome 没有显示过渡
如果您希望它与 Chrome 一起使用，您需要同时提供这两个参数。像那样background-size:100% 100%;

【解决方案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.

【讨论】：