如何启用背景图片缩放？

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

问题是您要将transform属性应用于父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>