텍스트가 부트 스트랩에 표시되지 않습니다. 이미지가있는 점보 트론

Question

트위터 부트 스트랩 jumbotron 클래스에 배경 이미지를 추가하려고합니다.

부트 스트랩 3을 사용하고 있습니다.

나는이 시도하지만 그것뿐만 아니라 모든 텍스트를 alpha'd과 대형 기기에 이미지를 제한하지 않았다

<!-- 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를 얻었다 : 여기

 .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입니다 길 %하지만 지금은 텍스트가 표시되지 않습니다는 :

<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 제공자 라이선스 계약을 배치한다 s를 사용하여 가상 엘레멘트가 그것에 상대적이되도록한다. 상대적으로 배치 된 조상 요소가 없으면 절대 배치 된 요소는 뷰포트를 기준으로합니다. 추가

시도 :

.jumbotron { 
    position: relative; 
}