jquery - 如何仅对图像(而不是子元素)进行缩放背景缩放

Question

下面是我的例子。也许其他人也有同样的问题。例如，我的名为 .description-container 的 div 与主容器 .one-more-container 一起移动。

$('div').removeClass('one-more-container');

.one-more-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.one-more-container .single-featured-background {
  transform: scale(1.05);
  transition: all 3s;
}

.single-featured-background {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all 3s;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-more-container">
<div id="post" class="single-featured-background" style="background-image: url('<?php echo $thumb['0'];?>')">
    <div class="super-title-container">
        <h1 class="super-title"><?php the_title(); ?></h1>
        <div class="description-container">
            <h2><?php the_field('antraste'); ?></h2>
            <p><?php the_field('aprasymas'); ?></p>
        </div>      
    </div>
</div>

Answer 1

您可以仅为背景创建单独的元素。您只能为该元素设置动画。

setTimeout(function(){
  $('div').removeClass('one-more-container');
},3000);

.one-more-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}


.single-featured-background {
  position:relative;
  height: 100vh;
  overflow: hidden;
}
.onlyBg{  
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all 3s;
}

.one-more-container .onlyBg {
  transform: scale(1.5);
  transition: all 3s;
}

.super-title-container{
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-more-container">
<div id="post" class="single-featured-background" >
    <div class="onlyBg" style="background-image: url('http://via.placeholder.com/350x150')"></div>
    <div class="super-title-container">
        <h1 class="super-title">title</h1>
        <div class="description-container">
            <h2>sub title</h2>
            <p>paragraph</p>
        </div>      
    </div>
</div>