css - Bootstrap Jumbotron w/image でテキストが表示されない

Question

背景画像を Twitter ブートストラップ ジャンボトロン クラスに追加しようとしています。

Bootstrap3 を使用しています。

私はこれを試しましたが、すべてのテキストもアルファ化し、画像をジャンボトロンに制限しませんでした:

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