Ho un pannello che ho colorato di blu se questo pannello è stato selezionato (cliccato su di esso). Inoltre, aggiungo un piccolo segno (immagine .png
) a quel pannello, che indica che il pannello selezionato è già stato selezionato prima.
Così se l'utente vede per esempio 10 pannelli e 4 di essi hanno questo piccolo segno, sa che ha già cliccato su quei pannelli prima. Questo funziona bene finora. Il problema è ora che non posso visualizzare il piccolo segno e rendere il pannello blu allo stesso tempo.
Ho impostato il pannello in blu con il css background: #6DB3F2;
e l'immagine di sfondo con background-image: url('images/checked.png')
. Ma sembra che il colore di sfondo sia sopra l'immagine così non si può vedere il segno.
È quindi possibile impostare z-index
per il colore di sfondo e l'immagine di sfondo?
Dovete usare il nome completo della proprietà per ciascuno:
background-color: #6DB3F2;
background-image: url('images/checked.png');
Oppure, puoi usare l'abbreviazione di sfondo e specificare tutto in una riga:
background: #6DB3F2 url('images/checked.png');
problema davvero interessante, non l'ho ancora visto. questo codice funziona bene per me. testato in chrome e IE9
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>