html – background-transition with background-size：cover

这可能已经在某个地方得到了解答,但我在搜索之后还没有找到.

我有一系列背景图像的div.大小设置为background-size：cover.

但我希望能够让图像放大并在悬停时增长.此转换不适用于看起来的封面属性.实际上,图像放大但没有过渡效果.它立即从“覆盖”到,在这种情况下,110％.当原始背景大小设置为100％时,它工作正常.

但有了这个,在调整页面大小时,图像似乎有点落后于div,这不是我想要的.封面始终保持中心,我想要的.

任何有关如何进行转换的建议,因为它会以覆盖或相同的效果增长.

Ilmiont

解决方法

在为背景大小使用CSS动画时,不能使用关键字(例如封面).

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

相关文字：

background-size – yes,as a repeatable list of a simple list of a
length,percentage or calc(); when both values are lengths,they are
interpolated as lengths; when both values are percentages,they are
interpolated as percentages; otherwise,both values are converted into
a calc() function that is the sum of a length and a percentage (each
possibly zero),and these calc() functions have each half interpolated
as real numbers. . This means keyword values are not animatable.

获得此效果的一种方法是将具有背景图像的元素放置在隐藏溢出的包裹元素中并应用缩放变换.

.wrapper { 
  width:300px;
  height:400px;
  overflow:hidden;
}
.image {
  background:url("http://placekitten.com/g/500/500");
  background-size:cover;
  width:100%;
  height:100%;
  transition: transform 2s;
}

.image:hover { transform:scale(1.1) }

<div class="wrapper">
  <div class="image"></div>
</div>