Bootstrap 上的文字不会出现在图片中

Question

我有一个问题，我的文字无法显示在图像上。它有一个非常奇怪的行为，因为我有一个小的悬停系统，并且文本只有在悬停触发时才会正确运行。我使用 Boostrap-5，这里是我的相关代码部分：

/* Style of the container containing the images and the text */

* {
  margin: 0;
  padding: 0;
}


/* Style of the text inside the images" */

.text-block {
  position: absolute;
  top: 5%;
  left: 5%;
  color: black;
}


/* Style for all 4 images */

.img {
  width: 100%;
  border-radius: 30px;
  filter: drop-shadow(0 0 0.5rem grey) opacity(60%);
}

.zoom {
  margin: 10px;
  transition: transform .5s;
}

.zoom:hover {
  transform: scale(1.1);
  z-index: 1;
}

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row g-0">
  <!-- "Applications" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./candidatures.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="meeting">
        <div class="text-block">
          <h4 class="big">Your applications</h4>
          <p class="medium">Keep track your applications here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Offers" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./offers.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="shake">
        <div class="text-block">
          <h4 class="big">Current offers</h4>
          <p class="medium">Check out the popular offers right now.</p>
        </div>
      </a>
    </div>
  </div>
</div>
<div class="row g-0">
  <div class="col-lg-6 col-sm-12">
    <!-- "Companies" square -->
    <div class="zoom">
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="corporations">
        <div class="text-block">
          <h4 class="big">Companies</h4>
          <p class="medium">Browse the companies here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Personnal informations" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="paper">
        <div class="text-block">
          <h4 class="big">Personnal informations</h4>
          <p class="medium">Modify your personnal informations here.</p>
        </div>
      </a>
    </div>
  </div>
</div>

Answer 1

问题是，position: absolute 会将元素与下一个相对父元素对齐。在您的情况下，这是正文，因为您从未将另一个元素声明为相对元素。

只需将 position: relative 添加到 .text-block class 的直接父级，其中：

.zoom a { position: relative; }

.zoom a {
  position: relative;
}


/* --- --- Original CSS --- --- */

/* Style of the container containing the images and the text */

* {
  margin: 0;
  padding: 0;
}


/* Style of the text inside the images" */

.text-block {
  position: absolute;
  top: 5%;
  left: 5%;
  color: black;
}


/* Style for all 4 images */

.img {
  width: 100%;
  border-radius: 30px;
  filter: drop-shadow(0 0 0.5rem grey) opacity(60%);
}

.zoom {
  margin: 10px;
  transition: transform .5s;
}

.zoom:hover {
  transform: scale(1.1);
  z-index: 1;
}

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row g-0">
  <!-- "Applications" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./candidatures.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="meeting">
        <div class="text-block">
          <h4 class="big">Your applications</h4>
          <p class="medium">Keep track your applications here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Offers" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./offers.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="shake">
        <div class="text-block">
          <h4 class="big">Current offers</h4>
          <p class="medium">Check out the popular offers right now.</p>
        </div>
      </a>
    </div>
  </div>
</div>
<div class="row g-0">
  <div class="col-lg-6 col-sm-12">
    <!-- "Companies" square -->
    <div class="zoom">
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="corporations">
        <div class="text-block">
          <h4 class="big">Companies</h4>
          <p class="medium">Browse the companies here.</p>
        </div>
      </a>
    </div>
  </div>
  <!-- "Personnal informations" square -->
  <div class="col-lg-6 col-sm-12">
    <div class="zoom">
      <a href="./companies.php">
        <img src="https://via.placeholder.com/1920x1080.png" class="img" alt="paper">
        <div class="text-block">
          <h4 class="big">Personnal informations</h4>
          <p class="medium">Modify your personnal informations here.</p>
        </div>
      </a>
    </div>
  </div>
</div>

Bootstrap 上的文字不会出现在图片中

Text won't go in image on Bootstrap

html

css

bootstrap-5