How to make zooming only to background image?

问题

I have created a example with keyframe to zoom in and out background image. It's work but also zooming inner text.

@-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>

In given example heading text also zoom with background image. I want background image zoom only. Don't want to zoom contents in that DIV.

回答1:

The problem is that in your case creating the zoom effect with transform: scale will scale the whole div including the content.

To achieve what you want simply change this part of your code

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

to this

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

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

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

回答2:

There is no CSS and no image in your example. I think, that you use the bg img for the div-container? I think the best way to do that, would be to use a wrapper.

Do not attach the bg img to the wrapping div, but to an child element of it:

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

Now you can use your animation to this new container.

来源：https://stackoverflow.com/questions/40888091/how-to-make-zooming-only-to-background-image