如何仅缩放到背景图像？ [英] How to make zooming only to background image?

问题描述

我创建了一个带有关键帧的示例，以放大和缩小背景图像。它既有效，又可以缩放内部文本。

  @-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％{背景位置：0px 0px，0px 0px，0px 0px} 50％{} 100％{背景位置：500px 1000px，400px 400px，300px 300px； }} @-ms-keyframes snow {0％{背景位置：0px 0px，0px 0px，0px 0px} 50％{} 100％{背景位置：500px 1000px，400px 400px，300px 300px； ; }} @ keyframes snow {0％{background-position：0px 0px; } 50％{} 100％{背景位置：5像素1000像素； }} div {width：100％;高度：100vh；背景图片：url（’http://www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg’）；背景大小：100％100％；位置：固定顶部：0;左侧：0;宽度：100％;高度：100vh；动画：无限放大30秒； text-align：center;} h1 {color：#fff; font-size：50px;} @关键帧缩放{0％{transform：scale（1,1）; } 50％{transform：scale（1.2,1.2）; } 100％{transform：scale（1,1）; }}  

 < div> < h1>文本上方< / h1>< / div>  

<在给定的示例中，标题文本也会随着背景图像缩放。我只想放大背景图像。

解决方案

问题是在您的情况下，使用<$创建缩放效果c $ c> transform：scale 将缩放整个div，包括内容。

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

  @关键帧zoom {
 0％{
 transform：scale（1,1）; 
} 
 50％{
 transform：scale（1.2,1.2）; 
} 
 100％{
 transform：scale（1,1）; 
} 
} 
  

对此

  @keyframes zoom {
 0％{
背景大小：100％100％； 
} 
 50％{
背景大小：120％120％； 
} 
 100％{
背景大小：100％100％； 
} 
} 
  

  div {width：100％;高度：100vh；背景图片：url（’http://insidestorybox.com/mudmax-ui/images/banner2.jpg’）；背景大小：100％100％；位置：固定最高：0;左：0；宽度：100％;高度：100vh；动画：无限放大30秒； text-align：center;} h1 {color：#fff;字体大小：50像素；} @关键帧缩放{0％{背景大小：100％100％； } 50％{背景大小：120％120％； } 100％{背景大小：100％100％; }} @ keyframes snow {0％{background-position：0px 0px; } 50％{} 100％{背景位置：5像素1000像素； }}  

 < div> < h1>文本上方< / h1>< / div>  

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.

解决方案

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>

这篇关于如何仅缩放到背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！