background-transition with background-size：cover [英] background-transition with background-size: cover

问题描述

这可能已经在某个地方回答了，但是我没有找到一些搜索后。

This may already be answered somewhere but I haven't found yet after a bit of searching.

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

I have a series of divs with background-images. The size is set to background-size: cover.

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

But I want to be able to have the images zoom in and grow on hover. This transition doesn't work with the cover attribute it seems. Actually, the image zooms but without the transition effect. It goes instantly from "cover" to, in this case, 110%. It works fine when the original background-size was set as 100%.

但是，在调整页面大小时，图像似乎平铺在div的后面，这是不是我想要的。

But with this, on resizing the page the image seems to tile somewhat behind the div, which is not what I want. Cover keeps it central at all times, what I want.

任何建议，如何有一个过渡，因为它增长与封面或相同的效果。

Any advice appreciated on how to have a transition as it grows with cover or the same effect.

Ilmiont

推荐答案

使用关键字CSS背景尺寸的动画。

You can't use keywords (such as cover) when using CSS animations for background-size.

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

相关text：

background-size - 是的，作为一个简单列表的一个可重复的列表的
长度，百分比或calc ）;当两个值都是长度时，它们是作为长度插入的
;当两个值都是百分比时，它们是
内插为百分比;否则，两个值都转换为
a calc（）函数，它是长度和百分比的总和（每个
可能为零），这些calc（）函数每个半插入
为实数。 。 这意味着关键字值不可动画。

获得此效果的一种方法是将元素

One approach to get this effect is to place element with the background image in a wrapping element with overflow hidden and apply a scale transform.

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

这篇关于background-transition with background-size：cover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！