2015-10-16 2 views
-1

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

+0

css3 background-cover ???像https://css-tricks.com/almanac/properties/b/background-size/? –

回答

1

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

+0

呃,我覺得很蠢!我知道我已經嘗試過,並沒有奏效....哦!發佈權的權力? –