如何在 Bootstrap 超大屏幕中保留带有颜色叠加层的文本颜色？

Question

搜索时我没有发现这个问题，根据 Jumbotron 上的 Bootstrap 4.2 文档，我已经对 div 进行了编码以包含内联背景图片，但是当我应用overlay 覆盖文字，代码：

.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 设置为更高的值，但这没有用。由于背景图像将是 dynamic/changing 而不是 fixed/standard 设置背景，我如何才能正确地将叠加层应用到内嵌图像，同时使超大屏幕中的文本保持真实 #ffffff?

Answer 1

我更改了 jumbotron p-3 和 p-md-5 填充，并将填充添加到叠加层，这使我可以从叠加层中删除绝对位置。我还将文本包裹在覆盖层 div.

中

.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;
}

<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(https://static.independent.co.uk/s3fs-public/thumbnails/image/2013/11/27/10/rexfeatures_3211080a.jpg?w968) no-repeat center center / cover;">
  <div class="overlay">
    <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>

如何在 Bootstrap 超大屏幕中保留带有颜色叠加层的文本颜色？

How to preserve text color with a color overlay in a Bootstrap Jumbotron?

css

background-image

bootstrap-4