Question

我正在尝试将一个背景图片添加到twitter bootstrap jumbotron类。

我正在使用Bootstrap3。

我尝试了这个，但它也对所有文字进行了字母排除，并没有将图像限制为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;
}

带有/ image的Bootstrap Jumbotron中不会显示文本

1 个答案: