Question

我创建了一个带关键帧的示例来放大和缩小背景图像。这是工作，但也缩放内部文本。

@-webkit-keyframes snow {
  0% { background-position: 0px 0px, 0px 0px, 0px 0px }
  50% {  }
  100% {
    background-position: 500px 1000px, 400px 400px, 300px 300px;
    ;
  }
}
@-moz-keyframes snow {
  0% { background-position: 0px 0px, 0px 0px, 0px 0px }
  50% { }
  100% {
    background-position: 500px 1000px, 400px 400px, 300px 300px;

  }
}
@-ms-keyframes snow {
  0% { background-position: 0px 0px, 0px 0px, 0px 0px }
  50% {  }
  100% {
    background-position: 500px 1000px, 400px 400px, 300px 300px;
    ;
  }
}
@keyframes snow {
  0% { background-position: 0px 0px; }
  50% {  }
  100% {
    background-position: 5px 1000px;

  }
}

div{
  width:100%; 
  height:100vh;
  background-image:
    url('http://www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg');
  background-size:100% 100%;
  position:fixed;
  top:0;left:0;
  width:100%;
  height:100vh;
  animation: zoom 30s infinite;
  text-align:center;
}
h1{
  color:#fff;
  font-size:50px;
}
@keyframes zoom {
  0% { transform:scale(1,1); }
  50% { transform:scale(1.2,1.2); }
  100% {
    transform:scale(1,1); 
  }
}

<div>
  <h1>OVER TEXT</h1>
</div>

在给定的示例标题文本中，还可以缩放背景图像。我只想要背景图像缩放。不想缩放该DIV中的内容。

Answer 1

问题在于，在使用transform: scale创建缩放效果的情况下，将缩放包括内容在内的整个div。

要实现您想要的功能，只需更改代码的这一部分

@keyframes zoom {
    0% { 
      transform:scale(1,1); 
    }
    50% { 
      transform:scale(1.2,1.2); 
    }
    100% {
      transform:scale(1,1); 
    }
}

到这个

@keyframes zoom {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 120% 120%;
  }
  100% {
   background-size: 100% 100%;
  }
}

＆＃13;

div {
  width: 100%;
  height: 100vh;
  background-image: url('http://insidestorybox.com/mudmax-ui/images/banner2.jpg');
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  animation: zoom 30s infinite;
  text-align: center;
}
h1 {
  color: #fff;
  font-size: 50px;
}
@keyframes zoom {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 120% 120%;
  }
  100% {
    background-size: 100% 100%;
  }
}
@keyframes snow {
  0% {
    background-position: 0px 0px;
  }
  50% {} 100% {
    background-position: 5px 1000px;
  }
}

＆＃13;

<div>
  <h1>OVER TEXT</h1>
</div>

＆＃13;

Answer 2

您的示例中没有CSS也没有图像。我想，你使用bg img作为div-container？我认为最好的方法就是使用包装器。

不要将bg img附加到包装div，而是附加到它的子元素：

.wrap {
  width: 100%;
  height: 400px;
  position: relative;
}

.bgImg {
  background-image: url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
  background-size: cover;
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

h1 {
 position: relative;
  z-index: 1;
}

<div class="wrap">
  <div class="bgImg"></div>
  <h1>Headline</h1>
</div>

现在，您可以将动画用于此新容器。

如何仅缩放到背景图像？

2 个答案: