Question

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

类似以下内容：

.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;，我认为这是您正在寻找的效果。

这是一个小提琴：https://jsfiddle.net/e4b9z2to/2/

使用背景大小时移动背景位置：封面

1 个答案: