Затемнить CSS фоновое изображение? [дубликат]

этот вопрос уже есть ответ здесь:

должно быть довольно простой вопрос. На моем сайте я делаю это:

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

то, что я хотел бы сделать, это сделать фоновое изображение темнее. Поскольку у меня есть элементы пользовательского интерфейса внутри этого DIV, я не думаю, что могу действительно поместите еще один div над ним, чтобы затемнить его. Предложения?

1 80
html css css3

1 ответ:

можно использовать CSS3 линейный градиент свойство вместе с фоновым изображением, как это:

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