Sovrapponi un’immagine di sfondo con un colore di sfondo rgba

Ho un div con un’immagine di background-image . Voglio sovrapporre l’immagine di sfondo con un colore rgba(0,0,0,0.1) ) quando l’utente alza il div.

Mi stavo chiedendo se c’è una soluzione a div-div (cioè non con più div, una per l’immagine e una per il colore, ecc.).

Ho provato più cose:

 

E questo CSS:

 .the-div { background-image: url('the-image'); margin: 10px; width: 200px; height: 80px; } #test-1:hover { background-color: rgba(0,0,0,0.1); } #test-2:hover { background: url('the-image'), rgba(0,0,0,0.1); } #test-3:hover { background: rgba(0,0,0,0.1); } 

Vedi questo violino .

    L’unica opzione che ho visto è quella di creare un’altra immagine, con sovrapposizione, precaricarla usando JavaScript e quindi usare .the-div:hover { background: url('the-new-image'); } .the-div:hover { background: url('the-new-image'); } . Tuttavia, mi piacerebbe una soluzione solo CSS (più ordinata, meno richieste HTTP, meno harddisk). C’è qualche?

    La soluzione di PeterVR ha lo svantaggio che il colore aggiuntivo viene visualizzato sopra l’intero blocco HTML, il che significa che viene visualizzato anche in cima al contenuto div, non solo in cima all’immagine di sfondo. Questo va bene se il tuo div è vuoto, ma se non sta usando un gradiente lineare potrebbe essere una soluzione migliore:

     
    Red text

    Vedi il violino . Peccato che le specifiche del gradiente siano attualmente un casino. Vedi la tabella di compatibilità , il codice sopra dovrebbe funzionare in qualsiasi browser con una quota di mercato notevole – con l’eccezione di MSIE 9.0 e precedenti.

    Modifica (marzo 2017): Lo stato della rete è diventato molto meno disordinato ormai. Pertanto, il linear-gradient (supportato da Firefox e Internet Explorer) e le -webkit-linear-gradient (supportate da Chrome, Opera e Safari) sono sufficienti, non sono più necessarie versioni con prefisso aggiuntivo.

    Sì, c’è un modo per farlo. Puoi usare uno pseudo-elemento after posizionato un blocco sopra l’immagine di sfondo. Qualcosa del genere: http://jsfiddle.net/Pevara/N2U6B/

    Il css per :after appare così:

     #the-div:hover:after { content: ' '; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.5); } 

    modificare:
    Quando si desidera applicare questo elemento a un elemento non vuoto e ottenere semplicemente l’overlay sullo sfondo, è ansible farlo applicando un elemento z-index positivo all’elemento e uno negativo a :after . Qualcosa come questo:

     #the-div { ... z-index: 1; } #the-div:hover:after { ... z-index: -1; } 

    E il violino aggiornato: http://jsfiddle.net/N2U6B/255/

     /* Working method */ .tinted-image { background: /* top, transparent red, faked with gradient */ linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), /* bottom, image */ url(http://sofit.miximages.com/css/Lion_waiting_in_Namibia.jpg); height: 1280px; width: 960px; background-size: cover; } .tinted-image p { color: #fff; padding: 100px; } 
     

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam distinctio, temporibus tempora a eveniet quas qui veritatis sunt perferendis harum!

    Idealmente, la proprietà dello sfondo ci consentirebbe di sovrapporre diversi sfondi simili alla stratificazione dell’immagine di sfondo dettagliata su http://www.css3.info/preview/multiple-backgrounds/ . Sfortunatamente, almeno in Chrome (40.0.2214.115), l’aggiunta di uno sfondo rgba accanto a uno sfondo di immagine url () sembra interrompere la proprietà.

    La soluzione che ho trovato è di renderizzare il livello rgba come immagine codificata Base64 1px * 1px e incorporarlo.

     .the-div:hover { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=), url("the-image.png"); } 

    per le immagini con pixel 1 * 1 codificati in base 64 ho usato http://px64.net/

    Ecco il tuo jsfiddle con queste modifiche apportate. http://jsfiddle.net/325Ft/49/ (Ho anche scambiato l’immagine con una che esiste ancora su Internet)

    Ho ottenuto il seguente lavoro:

     html { background: linear-gradient(rgba(0,184,255,0.45),rgba(0,184,255,0.45)), url('bgimage.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

    Quanto sopra produrrà una bella sovrapposizione blu opaca.