如何启用放大背景图像？

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>