使CSS背景图像变暗？

Question

应该是一个相当简单的问题.在我的网站上我这样做:

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

我想做的是让背景图像变暗.因为我在这个DIV中有UI元素,所以我认为我不能在它上面放置另一个div来使它变暗.建议？

Answer 1

您可以将CSS3 Linear Gradient属性与背景图像一起使用,如下所示:

#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>