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

背景图片位置和 CSS 过渡

Background image position and CSS transition

html

css

background-image

css-transitions

translate3d