Question

您好，亲爱的开发者社区

我必须开发一个boostrap-4传送带，其中每个幻灯片都带有背景图像（B）和文本（T），中间是固定图像（F），以便图像B滑动到图像F的后面，文本T在图像F的前面滑动。

我尝试使用z-index属性执行此操作，但未成功。这是我的jsfiddle示例：https://jsfiddle.net/4tvb6yuj/1/

以下是“轮播项目”的示例：

      <div class="carousel-item active">
        <img class="d-block w-100" src="...">
        <div style="z-index: 60" class="carousel-caption d-none d-block">
          <h5>(1) This text should <br/> 
              slide in front of  <br/> 
              the dog image</h5>
        </div>
      </div>

图像F放置在“旋转木马内部”的内部，任何“旋转木马项目”的内部和外部：

      <div style="position: relative; top: 30px; left:10px;">
        <img src="https://picsum.photos/id/237/120/180"/>
      </div>

有人可以帮我吗？

Answer 1

据我所知这是不可能的。您可以将整个.carousel-item堆叠在图像的前面或后面，但是不能将一个项目（background-image）放在后面，而将另一个项目（text）放在前面，因为这两个元素具有相同的父元素。

您必须更改标记和JavaScript以具有两个移动的容器。

<div>
    <div class="background-image"></div><!-- this will get moved by javascript -->
    <div class="dog-image"></div><!-- this is static -->
    <div class="text"></div><!-- this will get moved by javascript -->
</div>

更改设计会更好。如果我真的需要实现此功能，则可能不会使用Bootstrap轮播，而是创建一个定制的移动两个容器的容器。

Answer 2

如果我正确理解了该问题，则可以为d-block类添加自己的自定义CSS，以将狗图像设置为该div的背景图像，并将position设置为{{1 }}。关于图像大小：将大小设置为center会使狗倾斜/变宽，但是cover似乎太小了（尽管保持了宽高比）-取决于您要查找的内容。您可以尝试使用尺寸，也可以在背景尺寸中指定宽度/高度。

希望这会有所帮助

contain

.d-block {
  position: relative;
  background-image: url("https://picsum.photos/id/237/120/180");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

具有滑动背景，固定图像和滑动前景的轮播

2 个答案: