如何启用放大背景图像?

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://wallpaperlatest.com/wp-content/uploads/3d-live-wallpaper-free-download-1.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>
<a href="http://wallpaperlatest.com/free-live-wallpapers-download/">Image Souce:</a>
</div>

Answer 1

问题是您正在将转换属性应用于父div。 或者，您可以在缩放关键帧中修改父div 的背景大小，并从那里调整大小和位置。

@-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://wallpaperlatest.com/wp-content/uploads/3d-live-wallpaper-free-download-1.jpg');
background-size:100% 100%;
background-position: center center;
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%; 
}
50% { 
background-size: 150%; 
}
100% {
background-size: 100%; 
}
}

<div>
<h1>OVER TEXT</h1>
<a href="http://wallpaperlatest.com/free-live-wallpapers-download/">Image Souce:</a>
</div>