Question

我正在尝试将此文字放在图片上，但无法使用！我确实验证了代码中的所有内容，包括将CSS链接到代码中的错误，但没有找到任何东西。

.pai {
  position:relative;
}

.filho {
  position:absolute;
  text-align:center;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="Estudos.css">
  </head>
  <body>
    <div class="pai">
      <img src="bgestudio.jpg" alt="">
      <div class="filho">
        <h1>Qualquer</h1>
      </div>
    </div>
  </body>
</html>

强文本 [1]：https://i.stack.imgur.com/OsBdx.jpg

Answer 1

您需要使容器div与图像的宽度相同，然后文本div填充容器：

.pai {
  position:relative;
  display:inline-block; /* make this div as wide as the image - can be removed if the image is 100% width */
}

.filho {
  position:absolute;
  text-align:center;
  left: 0; 
  right:0;  /* left and right mean width will be 100%; */
  top:50%;
  transform: translateY(-50%); /* top 50 and translate mean it is vertically centered */
  
  color:white;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="Estudos.css">
  </head>
  <body>
    <div class="pai">
      <img src="https://www.fillmurray.com/200/300" alt="">
      <div class="filho">
        <h1>Qualquer</h1>
      </div>
    </div>
  </body>
</html>

Answer 2

您需要告诉文本出现的位置并设置z-index。

.pai {
  position:relative;
}

.filho {
  position:absolute;
  text-align:center;
  left:0;
  right:0;
  bottom:0;
  background: #fff;
  z-index: 5;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="Estudos.css">
  </head>
  <body>
    <div class="pai">
      <img src="bgestudio.jpg" alt="">
      <div class="filho">
        <h1>Qualquer</h1>
      </div>
    </div>
  </body>
</html>

我该如何解决相对/绝对问题？

2 个答案: