css - 使用背景大小 : cover 时移动背景位置

Question

我有一个带有背景图片的 slider 。当 slider 改变时，背景图像上的位置也会改变，以创建移动的背景效果。

类似下面的内容:

.carousel { 
  background-repeat: no-repeat;
  transition: background 1.5s ease-in;
  background: url('./slider_bg');
  background-attachment: fixed;
}

.carousel.bg0 {
  background-position: 0%;
}

.carousel.bg1 {
  background-position: 50%;
}

.carousel.bg2 {
  background-position: 100%;

}

这可行，但如果屏幕尺寸超过背景图像尺寸(比如 1920 宽度)，则会出现重复。我想使用 background-size: cover; 来解决上述重复问题，但如果我使用它，移动背景效果就会丢失。

有什么见解吗？

编辑:

为了使 1920x1080 图像和 1366 x 768 屏幕分辨率上方的代码更加清晰，当类随着新的背景位置发生变化时，图像似乎没有移动。但是，如果我改变屏幕的高度或减小宽度，就会发生移动。有什么想法吗？

Answer 1

将 background-repeat: no-repeat; 放在 carousel 类的底部。另外，你可以尝试使用background-size: contain;，我想这就是你想要的效果。

这是一个 fiddle :https://jsfiddle.net/e4b9z2to/2/