背景图像位置和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;定位的背景图像。