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