使用background-size: cover的背景过渡效果

Question

这个问题可能已经有答案了，但在搜索了一段时间后，我还没有找到。

我有一系列带有背景图片的 div。尺寸设置为 background-size: cover。

但是我想让图片在悬停时缩放和放大。似乎这个过渡效果与 cover 属性不兼容。实际上，图像会缩放，但没有过渡效果。它从“覆盖”瞬间变成 110%。如果初始的 background-size 设为 100%，则可以正常工作。

但是这样调整页面大小时，图像似乎在 div 后面有点平铺，这不是我想要的结果。Cover 可以始终保持中心位置，这就是我想要的。

如果您知道如何在 cover 的条件下实现缩放过渡效果或类似效果，请给予指导。

- Ilmiont

Answer 1

在使用CSS动画background-size属性时，不能使用关键词（例如cover）。

更多信息请参见：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>

- Marcelo

---

简单而有效。感谢这个好主意。 - jons

Answer 2

我能够通过在子div中加载图像来解决这个问题。

<div class='slide'>
    <div class='img' style='background-image:url(img/slide1.jpg)'></div>    
</div>

然后调整图像容器的比例。

  #slideshow .slide {
    position:absolute;
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    background-position:center center;
    overflow:hidden;
  } 


   #slideshow .img {
      position:absolute;
      background-size:cover;
      top:-5%;
      left:-5%;
      width:110%;
      height:110%;
      transition: width 1s, height 1s, top 1s, left 1s;  
   }  

  #slideshow .active .img{
      width:100%;
      height:100%;
      top:0;
      left:0;
  } 

完整幻灯片标记。

<div id='slideshow' class='slider' >
    <div class='slides'>
        <div class='slide'>
            <div class='img' style='background-image:url(img/slide1.jpg)'></div>
            <div class='caption'>
                <hr />
                <h1>PRIVATE HAVEN</h1>
            </div>
        </div>
        <div class='slide'>
            <div class='img' style='background-image:url(img/slide2.jpg)'></div>
            <div class='caption'>
                <hr />
                <h1>BLISSFUL SATISFACTION</h1>
            </div>
        </div>
        <div class='slide' >
            <div class='img' style='background-image:url(img/slide3.jpg)'></div>
            <div class='caption'>
                <hr />
                <h1>LIVE IN NATURE AT THE MOUNTAIN’S DOOR</h1>
            </div>
        </div>
    </div>  
</div>

- user1861582

---

不要忘记给.img元素添加z-index属性。我已经尝试了上面的代码，它可以正常工作。谢谢。 - Laode Muhammad Al Fatih