-1

我在尝试定位使用 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 链接

4

1 回答 1

1

有一个 CSS 属性background-position: center center;来定位背景图像。

于 2015-10-16T03:29:01.423 回答