Scurisci l'immagine di sfondo CSS?

Question

Dovrebbe essere una domanda abbastanza semplice. Nel mio sito Web faccio questo:

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

Quello che mi piacerebbe fare è rendere l'immagine di sfondo più scura. Dato che ho degli elementi dell'interfaccia utente all'interno di questo DIV, non penso di poter realmente posizionare un altro div su di esso per scurirlo. Suggerimenti?

Answer 1

È possibile utilizzare la proprietà CSS3 Linear Gradient con il vostro background-image in questo modo:

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

Ecco una 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>