我如何匯總身體的背景圖像？
[英]How do i rollup background image of body?
問題描述
body { background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat; animation: backdrop_roll linear 100s infinite; } /*.sky { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; opacity: 1; background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat; animation: backdrop_roll linear 100s infinite; } */.enemy-animation { position: relative; z-index: 1; animation-direction: alternate; animation-duration: 3s; animation-name: oscillate; animation-iteration-count: infinite; } #ship { position: absolute; width: 100px; height: 100px; top: 90%; left: 50%; margin-left: -50px; background: url('http://andreypokrovskiy.com/image_hosting/boredom/space-ship.png'); z-index: 1; } @keyframes oscillate { from { left: 0%; } to { left: calc(100% - 200px); } } @keyframes backdrop_roll {}
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="game.js"></script> <link rel="stylesheet" href="style.css"> <title>Shooting Game</title> </head> <body> <div class="sky"></div> <img class="enemy-animation" src="ship1-concept-finished-smaller.png" width="200" alt="enemy spaceship"> <div id="ship"></div> </body> </html>
我想使用關鍵幀 animation 移動背景天空圖像，感覺就像船在移動。我可以通過更改 css top 屬性在 div 上使用關鍵幀 animation 來移動它，但它不適用於身體。 @keyframes backdrop_roll { from { top: -630px; } to { top: 0; } } 如果它是一個@keyframes backdrop_roll { from { top: -630px; } to { top: 0; } } ，上面的行可以工作，任何移動背景的方法都可以。
1 個解決方案
解決方案1
1 已采納 2022-04-11 02:31:49
您需要定位background-position而不是translate ，因為translate將作為孩子的容器應用於 body。 請參見下面的示例，根據您希望船舶在視覺上看起來行駛的速度調整 animation 持續時間速度。 干杯。
body { background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat; animation: backdrop_roll linear 15s infinite; background-position: bottom center; } /*.sky { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; opacity: 1; background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat; animation: backdrop_roll linear 100s infinite; } */.enemy-animation { position: relative; z-index: 1; animation-direction: alternate; animation-duration: 3s; animation-name: oscillate; animation-iteration-count: infinite; } #ship { position: absolute; width: 100px; height: 100px; top: 90%; left: 50%; margin-left: -50px; background: url('http://andreypokrovskiy.com/image_hosting/boredom/space-ship.png'); z-index: 1; } @keyframes oscillate { from { left: 0%; } to { left: calc(100% - 200px); } } @keyframes backdrop_roll { to { background-position: center top; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="game.js"></script> <link rel="stylesheet" href="style.css"> <title>Shooting Game</title> </head> <body> <div class="sky"></div> <img class="enemy-animation" src="ship1-concept-finished-smaller.png" width="200" alt="enemy spaceship"> <div id="ship"></div> </body> </html>
如何更改<body>背景圖像與我的 jQuery 輪播的相同圖像匹配？
[英]How do I change the <body> background image matching same image of my jQuery carousel?
如何覆蓋/刪除不同組件中的main / home（正文）背景圖像
[英]How do I override/delete main/home (body) background image in different components
我如何使用靜態將背景圖像放在帶有django的CSS中的身體上？
[英]How do I put a background image on the body in css with django using static?
如何使用body元素中的圖像有效地偽造div的背景色？
[英]How do I effectively fake a div's background color using an image in the body element?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.