基於窗口大小的CSS3關鍵幀動畫變化的位置

Question

我在使用CSS3的關鍵幀動畫中遇到了一些麻煩。正在動畫的圖像位置根據窗口/屏幕大小而變化。我試圖找到解決這個問題的辦法，但我迷路了。我試圖指定一個邊界，以便動畫只在內部播放，但它不起作用。

請參閱here，然後嘗試調整窗口的大小。我知道這與position:absolute有關。我的最終目標是讓空間背景從左到右移動，但如果有意義的話，它仍然會死在中心位置。

感謝您的幫助。

Answer 1

---

的問題是，與容限和左緣，右屬性被設置爲自動，其調整的tdr-main左邊距，而space-bg的動畫修改絕對左側位置。當窗口調整爲較小的尺寸時，tdr-main上的左邊距縮小至45px，但背景圖像上的左邊位置仍然在絕對值342像素和450像素之間移動。

如果嵌入space-bg在其上有汽車的利潤在同一個容器內，

<div id="tdr-main"> 
     <div id="space-bg"> 
     </div> 
     [...] 
</div> 

那麼這兩個將保持居中，並在空間BG的位置會相對居中div容器。只需使用具有絕對或相對定位的z-index來正確堆疊東西。