Question

在Jumbotron上的Bootstrap 4.2文档中，我没有找到提到的内容，我已经将div编码为包含嵌入式背景图片，但是当我应用覆盖图时，它覆盖了文字，代码：

.jumbotron {
  position: relative;
  background-size: cover;
}
.jumbotron > .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(40, 40, 38, 0.5);
  z-index: 1;
}
.jumbo-text:after {
  z-index: 10;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark" style="background: url(img/foobar.jpg) no-repeat center center / cover;">
  <div class="overlay"></div>
  <div class="col-md-6 px-0">
    <h1 class="display-4">Title of a longer featured blog post</h1>
    <p class="lead my-3">
      Bacon ipsum dolor amet landjaeger cow kevin meatball pork rump. Ham
      hock venison ham pastrami, beef porchetta doner tongue filet mignon.
      Shank tri-tip porchetta pork turducken swine pork belly hamburger
      strip steak andouille landjaeger shoulder. Pastrami pig sausage
      porchetta rump. Shank doner pork loin buffalo. Pork chop jerky tail
      tenderloin, buffalo tongue turkey pork belly pork loin leberkas
      porchetta hamburger rump short ribs.
    </p>
    <p class="lead mb-0 padded-multiline">
      <a href="#" class="text-white font-weight-bold">More</a>
    </p>
  </div>
</div>

我尝试为文本添加div并将z-index设置为更高的值，但这没有用。由于背景图片将是动态/变化的，而不是固定/标准的设置背景，因此如何正确地将嵌入式图像应用于内联图像，但将巨型文本保留为真实的#ffffff？

Answer 1

我更改了超大型飞机的p-3和p-md-5填充，并将填充添加到了覆盖层上，这使我可以从覆盖层上删除绝对位置。我也将文字包裹在重叠式div中。

false

.jumbotron.p-3.p-md-5{
  padding:0px !important;
}

.jumbotron>.overlay {
  height:100%;
  width:100%;
  background-color: rgba(40, 40, 38, 0.5);
  padding:50px;
}

如何在Bootstrap Jumbotron中保留带有彩色覆盖层的文本颜色？

1 个答案: