css - 带有图像的 Bootstrap Jumbotron 中不会显示文本

Question

我正在尝试向 twitter bootstrap jumbotron 类添加背景图像。

我正在使用 Bootstrap3。

我试过了，但它也对所有文本进行了 alpha 处理，并且没有将图像限制为 jumbotron：

      .jumbotron:after {
          background: url("img/island.png") repeat scroll center center transparent;
          bottom: 0;
          content: "";
          display: block;
          left: 0;
          opacity: 0.4;
          position: absolute;
          right: 0;
          top: 0;
      }

这是HTML：

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a template for a simple marketing or informational website.</p>
    <p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
  </div>
</div>

这让我完成了 90% 的工作，但现在文本没有显示：

<link href="css/bootstrap.css" rel="stylesheet">

  <style type="text/css">

      .jumbotron {
          position: relative;
          z-index: 3;
      }

      .jumbotron:after {
          background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)), url('img/carousel_island.png');
          bottom: 0;
          content: "";
          display: block;
          left: 0;
          position: absolute;
          right: 0;
          top: 0;
          z-index: 2;
      }
  </style>

Answer 1

您应该相对定位.jumbotron类，以便伪元素相对于它；如果没有相对定位的祖先元素，则绝对定位的元素是相对于视口的。

尝试添加：

.jumbotron {
   position: relative;
}