Должен быть довольно простой вопрос. На моем веб-сайте я делаю это:
#landing-wrapper {
display:table;
width:100%;
background:url('landingpagepic.jpg');
background-position:center top;
height:350px;
}
То, что я хотел бы сделать, - сделать фоновое изображение темнее. Поскольку у меня есть элементы пользовательского интерфейса внутри этого DIV, я не думаю, что могу поместить другой div поверх него, чтобы затемнить его. Предложения?
Вы можете использовать свойство 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>