如何在滑动图像上放置文本

Question

每当我在 HTML 页面上运行此代码时，它会在第一张滑动图像上显示带有文本的框一秒钟，然后由于某种原因它会消失。这是滑动图像的 HTML。

.containerSlider {
  position: relative;
}

.text-block {
  position: absolute;
  bottom: 100px;
  right: 150px;
  background-color: black;
  color: white;
}

<section>
  <div id="containerSlider">
    <div id="slidingImage">
      <img src="https://via.placeholder.com/100" alt="image4">
      <div class="text-block">
        <p>This is a text to see if this works</p>
      </div>
    </div>

    <div id="slidingImage">
      <img src="https://via.placeholder.com/100/ffcccc" alt="image1">
      <div class="text-block">
        <p>This is a text to see if this works</p>
      </div>
    </div>

    <div id="slidingImage">
      <img src="https://via.placeholder.com/100" alt="image2">
      <div class="text-block">
        <p>This is a text to see if this works</p>
      </div>
    </div>

    <div id="slidingImage">
      <img src="https://via.placeholder.com/100/ffcccc" alt="image3">
      <div class="text-block">
        <p>This is a text to see if this works</p>
      </div>
    </div>
  </div>
</section>

滑块的 Javascript 是

<!-- <script src=“https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js”></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
    $(document).ready(function () {
        $('#containerSlider').slick({
            dots: true,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 5000,
        });
    });
</script>

Answer 1

.slidingImage {
  height: 100px;
  width: 100px;
  color: white;
  overflow-wrap: break-word;
  display: flex;
  justify-content:center;
  align-items:center
  background-repeat: no-repeat;
  margin-bottom: 10px
}

<div class="slidingImage" style="background-image: url(https://via.placeholder.com/100)">
    <p>This is a text to see if this works</p>
</div>
<div class="slidingImage" style="background-image: url(https://via.placeholder.com/100)">
    <p>This is a text to see if this works</p>
</div>
<div class="slidingImage" style="background-image: url(https://via.placeholder.com/100)">
    <p>This is a text to see if this works</p>
</div>
<div class="slidingImage" style="background-image: url(https://via.placeholder.com/100)">
    <p>This is a text to see if this works</p>
</div>

这里

Answer 2

您必须将 position:relative 添加到您希望放置文本的 div 中。在您的情况下，.containerSlider 包含完整的滑块，但我们希望定位到 dividual 幻灯片，在这种情况下是 .slidingImage。

所以，在将您的 CSS 更新为类似于下面的代码后，我相信我得到了您想要的。

#slidingImage {
  position: relative;
  width: fit-content;
}

p {
  position: absolute;
  bottom: 10%;
  background-color: black;
  color: white;
}

  <section>
      <div id="containerSlider">
        <div id="slidingImage">
          <img src="https://via.placeholder.com/100" alt="image4" />
          <div class="text-block">
            <p>This is a text to see if this works</p>
          </div>
        </div>

        <div id="slidingImage">
          <img src="https://via.placeholder.com/100/ffcccc" alt="image1" />
          <div class="text-block">
            <p>This is a text to see if this works</p>
          </div>
        </div>

        <div id="slidingImage">
          <img src="https://via.placeholder.com/100" alt="image2" />
          <div class="text-block">
            <p>This is a text to see if this works</p>
          </div>
        </div>

        <div id="slidingImage">
          <img src="https://via.placeholder.com/100/ffcccc" alt="image3" />
          <div class="text-block">
            <p>This is a text to see if this works</p>
          </div>
        </div>
      </div>
    </section>

如何在滑动图像上放置文本

How to place text over sliding images

html

css

slider