CSS: immagine di sfondo sul colore di sfondo

Ho un pannello che ho colorato in 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 in precedenza.CSS: immagine di sfondo sul colore di sfondo

Quindi, se l'utente vede per esempio 10 pannelli e 4 di questi hanno questo piccolo segno, sa che ha già cliccato su quei pannelli prima. Questo funziona bene finora. Il problema ora è che non riesco a visualizzare il piccolo segno e rendere il pannello blu allo stesso tempo.

Ho impostato il pannello su 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, quindi non puoi vedere il segno.

È quindi possibile impostare z-index per il colore di sfondo e l'immagine di sfondo?

fonte

2011-11-19 mkn

185

è necessario utilizzare il nome della proprietà completo per ogni:

background-color: #6DB3F2; 
background-image: url('images/checked.png');

In alternativa, è possibile utilizzare la scorciatoia di sfondo e specificare il tutto in una sola riga:

background: #6DB3F2 url('images/checked.png');

fonte

2011-11-19 16:05:37 dodger

Il primo metodo non ha funzionato per me. Il 2 ° metodo abbreviato funziona perfettamente. –

Anche il secondo ha funzionato per me. Grazie steve – starkeen

Anche il primo non ha funzionato per me. Il secondo ha fatto. – felwithe

problema davvero interessante, rifugio L'ho visto ancora. questo codice funziona bene per me. testato in cromo e IE9

<html> 
<head> 
<style> 
body{ 
    background-image: url('img.jpg'); 
    background-color: #6DB3F2; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

fonte

2011-11-19 16:07:04

-8

body 
{ 
background-image:url('image/img2.jpg'); 
margin: 0px; 
padding: 0px; 
}

fonte

2013-08-13 11:02:24

Per me questa soluzione non ha funzionato:

background-color: #6DB3F2; 
background-image: url('images/checked.png');

Ma invece ha funzionato il contrario:

<div class="block"> 
<span> 
... 
</span> 
</div>

il css :

.block{ 
    background-image: url('img.jpg') no-repeat; 
    position: relative; 
} 

.block::before{ 
    background-color: rgba(0, 0, 0, 0.37); 
    content: ''; 
    display: block; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
}

fonte

2014-07-24 21:57:00

Grazie per il codice Francisc !! Come dice lui, unire il colore e l'immagine di sfondo non ha risolto il problema anche per me. Con quell'aiuto e piccole modifiche sul mio codice sono riuscito a risolvere il problema. – Mikel

È inoltre possibile utilizzare breve trucco per utilizzare immagine e colore, sia in questo modo: -

body { 
    background:#000 url('images/checked.png'); 
}

fonte

2014-08-16 20:50:11

-2

<li style="background-color: #ffffff;"><a href="/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>

altro campione di sicurezza Centro Immagine e Colore di sfondo

1.First clearpixel correzione area dell'immagine Area immagine area centrale stile 3.li sfondo o colore div style

fonte

2014-12-27 07:03:34 alpc

Il CSS incorporato non è appropriato se esiste un'altra opzione ragionevole. – Smittles

Sulla base di MDN Web Docs è possibile impostare più sfondi con sfondo ng stenografia background proprietà o proprietà individuali ad eccezione di background-color. Nel tuo caso, si può fare un trucco usando linear-gradient come questo:

background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);

La prima voce (immagine) nel parametro sarà messo in cima. Il secondo oggetto (colore di sfondo) sarà messo sotto il primo. Puoi anche impostare altre proprietà singolarmente. Ad esempio, per impostare la dimensione e la posizione dell'immagine.

background-size: 30px 30px; 
background-position: bottom right; 
background-repeat: no-repeat;

vantaggio di questo metodo è che si può implementare per altri casi facilmente, ad esempio, si vuole fare il colore blu sovrapponendo l'immagine con una certa opacità.

background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png'); 
background-size: cover, contain; 
background-position: center, right bottom; 
background-repeat: no-repeat, no-repeat;

I singoli parametri di proprietà sono impostati rispettivamente. Poiché l'immagine viene posizionata sotto la sovrapposizione colore, i suoi parametri di proprietà vengono posizionati anche dopo i parametri di sovrapposizione colore.

fonte

2017-12-24 21:16:43 lukibsubekti

E se si desidera generare un'ombra nera sullo sfondo, è possibile utilizzare il seguente :

background:linear-gradient(rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

fonte

2018-01-15 17:12:53

CSS: immagine di sfondo sul colore di sfondo

risposta

Problemi correlati