bootstrap 图片下的段落

Question

我有一个带有背景图片 (SVG) 的 div。我正在尝试让 Bootstrap 表现得好像那个背景不存在一样，并且像它应该的那样做出响应，据说我想在那个背景上写东西，就好像它不存在一样。

这里的预期结果是“测试”写在背景之上，而不是在背景之下。

我错过了什么？

.firstsection {
  height: 70vh;
  background-image: url(https://via.placeholder.com/1200);
  background-size: cover;
}

.text {
  font-size: 50px;
  color: red;
}

.secondsection {
  height: 30vh;
  background-color: #151519;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="firstsection">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text">
        <p>test</p>
      </div>
    </div>
  </div>
</div>

<div class="secondsection">

</div>

Answer 1

这是因为父元素有一个 background-image 意思是如果你用 background-image 嵌套在 div 中的文本，它会直接越过顶部。你可以用后台关闭div然后开始你的container和rowdiv.

我添加了一个虚拟图像来演示。

.firstsection {
  height: 70vh;
  background-image: url(https://dummyimage.com/600x400/000/fff);
  background-size: cover;
}

.text {
  font-size: 50px;
  color: red;
}

.secondsection {
  height: 30vh;
  background-color: #151519;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class="firstsection"></div>
<div class="container">
  <div class="row">
    <div class="col-lg-12 text">
      <p>test</p>
    </div>
  </div>
</div>
<div class="secondsection"></div>

如果你想保持相对相同的标记，从背景中删除图像，并使用 img 标签。然后你可以添加 flex-column class。然后，要使其与背景图像相同，您可以在 img 上指定 width: 100%;。最后，将 margin: 0; 添加到 body 元素，使其显示为 full-width 作为背景图像。

.firstsection {
  height: 70vh;
  /*background-image: url(background.svg);*/
  background-size: cover;
}

.text {
  font-size: 50px;
  color: red;
}

.secondsection {
  height: 30vh;
  background-color: #151519;
}

img {
  width: 100%;
}

body {
  margin: 0;
}

<div class="firstsection">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 w-100 flex-column text">
        <img src="https://dummyimage.com/600x400/000/fff">
        <p>test</p>
      </div>
    </div>
  </div>
</div>

<div class="secondsection">

</div>

编辑 ~ 使文本位于背景图像之上。

.firstsection {
  height: 70vh;
  background-image: url(https://dummyimage.com/600x400/000/fff);
  background-size: cover;
  background-position: center;
}

.text {
  font-size: 50px;
  color: red;
}

.secondsection {
  height: 30vh;
  background-color: #151519;
}

<!-- your index file should be structured like so -->
<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <div class="firstsection">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text">
          <p>test</p>
        </div>
      </div>
    </div>
  </div>

  <div class="secondsection">

  </div>

</body>
</html>

bootstrap 图片下的段落

bootstrap paragraph under image

html

css

bootstrap-5