Question

我使用this引导模板。我想固定轮播背景图片，但是当我添加

时

background-attachment: fixed;

像这样

<div class="carousel-item active" style="
background-image: url('http://placehold.it/1900x1080');
background-attachment: fixed;
">

我在chrome中得到了我想要的东西，但是在Firefox中却很奇怪。在Firefox中，当幻灯片移动时，图像不固定。幻灯片停止后，图像被固定。我没有找到发生这种情况的原因。

Answer 1

这是一个好问题。我花了一段时间才弄清楚发生了什么。

Bootstrap传送带使用transform: translateX();进行动画制作。

.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

无论背景是固定的，变换转换都会将固定的背景图像左右移动。与位置或其他任何东西不同，背景图像在元素移动的任何地方都保持固定。这真是令人讨厌。

我试图通过使用一个额外的div和一个额外的子div作为背景来破解它，但是我无法在课堂上全神贯注。我试图在转换幻灯片时反转背景图像，以得到固定的效果，但是下一张幻灯片上的背景图像无需动画。很混乱。不确定如何使用使用translate进行动画处理的滑块来完成此操作。 https://www.codeply.com/go/vzVI1YkwYc

也许聪明的人可以弄清楚这一点。

修复Firefox中背景图片的位置（Bootstrap轮播）

1 个答案: