ブートストラップでカバー画像に暗いオーバーレイを挿入するにはどうすればよいですか？

Question

私は私のサイトに表紙画像を設定している：

<div class="intro-header"> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-12"> 
       <div class="intro-message"> 
        <h3>Welcome to</h3> 
        <h3>Example</h3> 
        <hr class="intro-divider"> 
        <ul class="list-inline intro-social-buttons"> 
         <li> 
          <a href="images/background" class="btn-social btn-outline">f</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- /.container --> 
</div> 

それは、以下のCSSを使用したスタイルです。

.intro-header { 
    padding-top: 50px; 
    padding-bottom: 50px; 
    text-align: center; 
    color: #f8f8f8; 
    background: url("http://placehold.it/900x650") no-repeat center center; 
    background-size: cover; 
} 

.intro-message { 
    position: relative; 
    padding-top: 20%; 
    padding-bottom: 20%; 
} 

.intro-message > h1 { 
    margin: 0; 
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6); 
    font-size: 5em; 
} 

.intro-divider { 
    width: 400px; 
    border-top: 1px solid #f8f8f8; 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
} 

.intro-message > h3 { 
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6); 
} 

@media(max-width:767px) { 
    .intro-message { 
     padding-bottom: 15%; 
    } 

    .intro-message > h1 { 
     font-size: 3em; 
    } 

    ul.intro-social-buttons > li { 
     display: block; 
     margin-bottom: 20px; 
     padding: 0; 
    } 

    ul.intro-social-buttons > li:last-child { 
     margin-bottom: 0; 
    } 

    .intro-divider { 
     width: 100%; 
    } 
} 

.network-name { 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: 400; 
    letter-spacing: 2px; 
} 

私はの上にオーバーレイを使用して画像を暗くしたいと思います画像。これが可能なのか、もしそうなら、私は望む効果を得るために何をする必要があるのですか？

Answer 1

これを正しく理解すれば、不透明度を使うことができます。 注：あなたが暗く、その後、調光器と。これは、以下に暗いです

.intro-header { 
    padding-top: 50px; 
    padding-bottom: 50px; 
    text-align: center; 
    color: #f8f8f8; 
    background: url("http://placehold.it/900x650") no-repeat center center; 
    background-size: cover; 
    opacity: .5; 
} 

調光器のためです。暗く新しいクラスにメモを取る

.intro-header { 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
    text-align: center; 
 
    color: #f8f8f8; 
 
    background: url("http://placehold.it/900x650") no-repeat center center; 
 
    background-size: cover; 
 
} 
 

 
.intro-message { 
 
    position: relative; 
 
    padding-top: 20%; 
 
    padding-bottom: 20%; 
 
} 
 

 
.intro-message > h1 { 
 
    margin: 0; 
 
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6); 
 
    font-size: 5em; 
 
} 
 

 
.intro-divider { 
 
    width: 400px; 
 
    border-top: 1px solid #f8f8f8; 
 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
 
} 
 

 
.intro-message > h3 { 
 
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6); 
 
} 
 

 
@media(max-width:767px) { 
 
    .intro-message { 
 
     padding-bottom: 15%; 
 
    } 
 

 
    .intro-message > h1 { 
 
     font-size: 3em; 
 
    } 
 

 
    ul.intro-social-buttons > li { 
 
     display: block; 
 
     margin-bottom: 20px; 
 
     padding: 0; 
 
    } 
 

 
    ul.intro-social-buttons > li:last-child { 
 
     margin-bottom: 0; 
 
    } 
 

 
    .intro-divider { 
 
     width: 100%; 
 
    } 
 
} 
 

 
.network-name { 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    letter-spacing: 2px; 
 
} 
 
.intro-header { 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
    text-align: center; 
 
    color: #f8f8f8; 
 
    background: url("http://placehold.it/900x650") no-repeat center center; 
 
    background-size: cover; 
 
    opacity: .5; 
 
} 
 
.darken { background: black; opacity: .7;}

<div class="intro-header "> 
 
    <div class="container"> 
 

 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <div class="intro-message darken"> 
 
        <h3>Welcome to</h3> 
 
        <h3>Example</h3> 
 
        <hr class="intro-divider"> 
 
        <ul class="list-inline intro-social-buttons"> 
 
         <li> 
 
          <a href="images/background" class="btn-social btn-outline">f</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- /.container --> 
 
</div>