背景：urlとfilter：brightness

Question

filter：brightnessでdivの背景イメージを暗くしたいと思います。それはうまくいくが、明らかに画像だけでなくdiv全体を暗くする。 CSSで背景画像だけを暗くするにはどうすればよいですか？私はそれに白いテキストを載せたいと思っています。私は親と子供について話したとき

#about_header { 
 
    background: url(../img/background/spa_02.jpg) no-repeat center center fixed; 
 
filter: brightness(20%); 
 
-webkit-filter: brightness(20%); 
 
-moz-filter: brightness(20%); 
 
-o-filter: brightness(20%); 
 
-ms-filter: brightness(20%); 
 
    height:400px; 
 
    display: table; 
 
    position: relative; 
 
    width: 100%; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
#about_header h1{ 
 
    color: white; 
 
}

<section id="about_header"> 
 
    <div class="container text-vcenter"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div> 
 
      <h1>Contact us</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

は私が実際に間違っていた：

は、ここに私のコードです。あなたは、同じレベルの下にコンテナを配置する必要があります：

#about_header { 
 
    background: url("http://www.thestatedhome.com/media/catalog/category/13514044-brown-natural-linen-texture-for-the-background-Stock-Photo.jpg") no-repeat center center fixed; 
 
    filter: brightness(20%); 
 
    height: 400px; 
 
    position: relative; 
 
    width: 100%; 
 
    background-size: cover; 
 
} 
 

 
.container { 
 
    display: table; 
 
    position: absolute; 
 
    top: 0px; 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 

 
.text-vcenter { 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
.container h1 { 
 
    color: white; 
 
}

<section id="about_header"></section> 
 
<div class="container"> 
 
    <div class="text-vcenter"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div> 
 
      <h1>Contact us</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>