Koyulaştır CSS arka plan resmi?

Question

Oldukça basit bir soru olmalı. Sitemde şunu yaparım:

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

Yapmak istediklerim arka plan görüntüsünü koyulaştırmaktır. Bu DIV içindeki UI elemanlarına sahip olduğumdan, onu koyulaştırmak için gerçekten başka bir div yerleştirebileceğimi düşünmüyorum. Öneriler?

Answer 1

Böyle arka plan-resimle birlikte CSS3 Linear Gradient özelliğini kullanabilirsiniz:

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

İşte bir demo:

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