背景转换背景大小:封面

Question

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

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

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

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

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

Ilmiont

Answer 1

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

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

相关文字:

background-size - 是的,作为长度,百分比或calc()的简单列表的可重复列表; 当两个值都是长度时,它们被插值为长度; 当两个值都是百分比时,它们被插值为百分比; 否则,两个值都被转换为calc()函数,该函数是长度和百分比之和(每个可能为零),并且这些calc()函数将每一半内插为实数..这意味着关键字值不可动画.

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

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