画像に暗闇をつける方法は？

Question

私は、適切な背景がこの

ようにする必要がありますが、今、それはこの

のように見え、これは私がその画像を添付しています方法ですマストヘッドコンポーネントを作成しています

<div class="bg_image" 
    style="background-image: url('images/driver_rewards/masthead_desktop.jpg')"></div> 

css

.bg_image{ 
    width: 100%; 
    min-height: 503px; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

お勧めはありますか？

Answer 1

あなたはfilterを使用し、明るさを設定することができます。

.bg_image{ 
    width: 100%; 
    min-height: 503px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    -webkit-filter: brightness(50%); 
    filter: brightness(50%); 
} 

Answer 2

あなたは上opacityを適用することができます擬似要素を使用してバックグラウンドの上にオーバーレイを適用することができます。

.bg { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: transparent url(//lorempixel.com/300/200) no-repeat 0 0; 
 
    position: relative; 
 
} 
 
.bg > * { 
 
    z-index: 3; 
 
    color: white; 
 
    position: relative; 
 
} 
 
.bg.darken::before { 
 
    display: block; 
 
    content: ""; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    position: absolute; 
 
    background-color: black; 
 
    opacity: .5; 
 
}

<div class="bg"> 
 
    <h2>Without pseudo element for darkening</h2> 
 
</div> 
 
<div class="bg darken"> 
 
    <h2>With pseudo element for darkening</h2> 
 
</div>