如何仅在图像上缩放背景缩放（不在子元素上）

Question

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

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

Answer 1

您只能为背景创建单独的元素。而且您只能为该元素设置动画。

ngSwitch

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;
}

Answer 2

您可以使用

代替比例

background-size: 150%;