代码之家 › 专栏 › 技术社区 › GÊá´á´á´ÊCá´á´

如何保留文字颜色与颜色覆盖在引导大屏幕?

background-image bootstrap-4 css

GÊá´á´á´ÊCá´á´ · 技术社区 · 6 年前

搜索时,我没有找到上述内容,根据引导4.2文档 Jumbotron 我已经编码了 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 更高的值,但那不起作用。由于背景图像是动态的/变化的,而不是固定的/标准的背景集,我如何才能正确地对内联图像应用覆盖,但使Jumbotron中的文本保持为真 #ffffff ?

1 回复 | 直到 6 年前

mbunch 6 年前

我更改了Jumbotron P-3和P-MD-5填充,并将填充添加到覆盖,这允许我从覆盖中删除绝对位置。我还将文本包装在覆盖分区内。

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