背景を暗くする

.pngイメージを暗くする方法はありますか？私は背景イメージとして1つを持っていますが、オーバーレイを暗くするように設定すると、コンテナ全体が覆われません。背景を暗くする

.overlay { 
    background-color: #322D36 ; 
    bottom: 0; 
    left: 0; 
    opacity: 0.5; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 1; 
}

画像の外側にも表示されます。画像だけを暗くする方法はありますか？

demo

出典

2016-05-27 Josh

あなたはそうのような（スーパーサポートされていません）filterプロパティを使用することができます。

filter: brightness(0.4);

-webkit-のような接頭辞が必要な場合があります。

ここにはfiddleがあります。なぜなら、コメントの

EDIT：

はその後、前の疑似クラスを使用して画像を追加し、コンテナの幅とイメージの高さを確認します。

.container { 
    position: relative; 
    width: ###; 
    height: ###; 
} 

.container:before { 
    content: ''; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    display: block; 
    position: absolute; 
    z-index: 1; 
    background-image: some-url; 
    -webkit-filter: brightness(0.4); 
} 

.content { 
    position: relative; 
    z-index: 10; 
}

すべてのテキストを.content divに入れます。

出典

2016-05-27 11:34:07 GMchris

のですか？それもテキストを暗くし、その色を破棄します。 – Josh

あなたのケースでは、内容は常に暗くなります。それを見て[ここ]（https://jsfiddle.net/cyofy254/5/） –

私の答えを更新しました。 – GMchris

linear-gradientを背景に使用できます。

background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url("https://lh4.googleusercontent.com/-kDFp715GK_iC4AwrDWQpCR0HfxDMp0WYZATcnlXDhXgf-05OTv3Z9E-P1bL2imdAFAtWg=w1876-h815");

Updated JSFiddle。

JSFiddleここでは、背景のみが暗くなり、残りの要素は正常に表示されます。

出典

2016-05-27 11:36:08

はい、しかし、私は暗闇にしかイメージが必要ではないと言いました。このデモは、画像で覆われていない容器の残りのスペースも暗くなることを示しています。 – Josh

@Joshいいえ、そうではありません。画像が写らない空白です。 –

@Joshああ待って、あなたはimgを変更しましたか？また、2番目の例を見てください。 –

あなたはbackground-imageプロパティの後に背景色を使用して、オーバーレイbackground-imageためbackground-blend-modeプロパティを使用することができます。ここでの例では、コンテナはまたそれでTEXを持っている場合はどう

https://codepen.io/anon/pen/PQOejG?editors=1100

出典

2018-02-16 09:37:12