背景大小的背景过渡：封面答案

【问题标题】：background-transition with background-size: cover背景大小的背景过渡：封面
【发布时间】：2015-02-07 16:24:56
【问题描述】：

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

我有一系列带有背景图像的 div。大小设置为背景大小：封面。

但我希望能够放大图像并在悬停时放大。这种过渡不适用于它看起来的封面属性。实际上，图像缩放但没有过渡效果。在这种情况下，它会立即从“覆盖”变为 110%。当原始背景大小设置为 100% 时，它可以正常工作。

但是有了这个，在调整页面大小时，图像似乎有点平铺在 div 后面，这不是我想要的。封面始终保持居中，这是我想要的。

任何关于如何随着掩护或相同效果增长而进行过渡的建议。

Imiont

【问题讨论】：

标签： html css transition background-size

【解决方案1】：

我能够通过在子 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>

【讨论】：

不要忘记将z-index 属性添加到.img 元素。我已经尝试了上面的代码，它可以工作。谢谢。

【解决方案2】：

在使用 CSS 动画作为背景尺寸时，不能使用关键字（例如封面）。

相关文字：

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>

【讨论】：