Come sovrapporre l’immagine con il colore nei CSS?

Obbiettivo

Voglio una sovrapposizione di colore su questo elemento di intestazione. Come posso farlo con i CSS?

Codice

HTML

 

CSS

 #header { background: url(../img/bg.jpg) 0 0 no-repeat fixed; height: 100%; overflow: hidden; color: #FFFFFF } 

Dovresti usare rgba per sovrascrivere il tuo elemento con photos.rgba è un modo per dichiarare un colore nei CSS che include il supporto della trasparenza alfa. puoi usare .row come un overlayer come questo:

 #header { background: url(../img/bg.jpg) 0 0 no-repeat fixed; height: 100%; overflow: hidden; color: #FFFFFF } .row{ background: rgba(39,62,84,0.82); overflow: hidden; height: 100%; z-index: 2; } 
 #header.overlay { background-color: SlateGray; position:relative; width: 100%; height: 100%; opacity: 0.20; -moz-opacity: 20%; -webkit-opacity: 20%; z-index: 2; } 

Qualcosa come questo. Basta aggiungere la class di overlay all’intestazione, ovviamente.

Usa il più ampio backgorund sull’elemento e usa un gradiente lineare come sovrapposizione colore dichiarando sia lo stacco colore iniziale che quello finale come lo stesso valore.

Tieni presente che i livelli di una dichiarazione a più background vengono letti come se fossero visualizzati, dall’alto verso il basso, quindi inserisci prima la sovrapposizione, quindi l’immagine della bg:

 #header { background: linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)) cover, url(../img/bg.jpg) 0 0 no-repeat fixed; height: 100%; overflow: hidden; color: #FFFFFF } 

Se non ti dispiace usare il posizionamento assoluto, puoi posizionare l’immagine di sfondo e quindi aggiungere una sovrapposizione usando l’opacità.

 div { width:50px; height:50px; background: url('http://sofit.miximages.com/html/Link.gif'); position:absolute; left:0; top:0; } .overlay { background:red; opacity:.5; } 

Vedi qui: http://jsfiddle.net/4yh9L/

In helpshift, hanno usato la class home-page come

HTML

 
...

CSS

 .home-page { background: transparent url("../images/backgrounds/image-overlay.png") repeat 0 0; background: rgba(39,62,84,0.82); overflow: hidden; height: 100%; z-index: 2; } 

puoi provare simile in questo modo