如何啓用放大背景圖像？

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>