[解決済み] CSSの背景画像を暗くする？[重複あり］

質問

かなり簡単な質問のはずです。私のウェブサイトでは、このようにしています。

#landing-wrapper {
    display:table;
    width:100%;
    background:url('landingpagepic.jpg');
    background-position:center top;
    height:350px;
}

やりたいことは、背景画像を暗くすることです。このDIVの中にUI要素があるので、この上に別のDIVを配置して暗くすることはできないと思います。何かいい方法はありませんか？

どのように解決するのですか？

を使用することができます。 CSS3 直線グラデーション プロパティとbackground-imageを組み合わせて、以下のようにします。

#landing-wrapper {
    display:table;
    width:100%;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg');
    background-position:center top;
    height:350px;
}

以下はデモです。

#landing-wrapper {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150');
  background-position: center top;
  height: 350px;
  color: white;
}

<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>