背景圖像位置和CSS轉換

Question

我在嘗試定位用CSS關鍵幀動畫的背景圖像時遇到問題。目前它是一個大的水平圖像，從左到右滑動然後回到左側。我希望它能讓觀衆感覺到他們正在觀看房間周圍的全景或旋轉。

我的問題是它在大屏幕尺寸下效果很好，但在諸如1280x600之類的東西上，您只能看到天花板。有沒有辦法將它放置在中心或底部加載背景圖像，就像傳統背景圖像一樣？

這裏是我的代碼爲背景圖像的樣本：

.sliding-background { 
    @media screen and (min-width: @screen-lg-min) { 
     background: url("http://frontier.websitewelcome.com/~eventcen/images/meeting-room-pano-lg.jpg") repeat-x; 
     height: 100%; 
     width: 4314px; 
     animation: slide-lg 30s linear infinite; 
    } 
    } 

@keyframes slide-lg{ 
    /* do I need to put something here? maybe 100% on the y-axis */ 
    0%  { transform: translate3d(0, 0, 0); } 
    50% { transform: translate3d(-1757px, 0, 0);  } 
    100% { transform: translate3d(0, 0, 0); } 
} 

CodePen Link

Answer 1

有一個CSS屬性background-position: center center;定位的背景圖像。