CSS: immagine di sfondo sul colore di sfondo

169

Ho un pannello che ho colorato di blu se questo pannello viene selezionato (cliccato su di esso). Inoltre, aggiungo un piccolo segno ( .pngimmagine) a quel pannello, che indica che il pannello selezionato è già stato selezionato in precedenza.

Quindi, se l'utente vede ad esempio 10 pannelli e 4 di questi hanno questo piccolo segno, sa che ha già cliccato su quei pannelli prima. Questo lavoro va 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 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, quindi non puoi vedere il segno.

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

— MKN
fonte

290

È necessario utilizzare il nome completo della proprietà per ciascuno:

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

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

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

— furbacchione
fonte

7

Il primo metodo non ha funzionato per me. Il secondo metodo abbreviato funziona perfettamente.

— Steve Breese,

1

Valore di stile non sicuro

— Nexeuz,

@Nexeuz perché consideri questa sintassi di stile come Nexeuz non sicura?

— Webwoman il

31

Per me questa soluzione non ha funzionato:

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

Ma invece ha funzionato diversamente:

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

— Francisc Aknai
fonte

2

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

— Mikel,

17

E se vuoi generare un'ombra nera in background, puoi usare quanto segue:

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

— Risa__B
fonte

5

Sulla base di MDN Web Docs è possibile impostare più background utilizzando la backgroundproprietà abbreviata o singole proprietà ad eccezione di background-color. Nel tuo caso, puoi fare un trucco usando in linear-gradientquesto modo:

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

Il primo elemento (immagine) nel parametro verrà messo in primo piano. Il secondo elemento (sfondo colorato) verrà inserito sotto il primo. Puoi anche impostare altre proprietà singolarmente. Ad esempio, per impostare le dimensioni e la posizione dell'immagine.

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

Il vantaggio di questo metodo è che puoi implementarlo facilmente per altri casi, ad esempio, vuoi rendere il colore blu sovrapposto all'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 parametri delle singole proprietà sono impostati rispettivamente. Poiché l'immagine viene posizionata sotto la sovrapposizione di colore, anche i suoi parametri di proprietà vengono posizionati dopo i parametri di sovrapposizione di colore.

— Luki B. Subekti
fonte

2

problema davvero interessante, non l'ho ancora visto. 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>

— Ramzi Khahil
fonte

2

Puoi anche usare un trucco breve per usare l'immagine e il colore in questo modo: -

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

— Kesar Sisodiya
fonte

1

Questo in realtà funziona per me:

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

Puoi anche rilasciare un'ombra solida e impostare l'immagine di sfondo:

background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;

Se la prima opzione non funziona per qualche motivo e non desideri utilizzare l'ombra della casella, puoi sempre utilizzare uno pseudo elemento per l'immagine senza alcun HTML aggiuntivo:

.btn{
    position: relative;
    background-color: #6DB3F2;
}
.btn:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url('images/checked.png');
}

— Fernán García de Zúñiga
fonte

0

Ecco come ho disegnato i miei pulsanti colorati con un'icona sullo sfondo

Ho usato la proprietà "background-color" per il colore e la proprietà "background" per l'immagine.

  <style>
    .btn {
      display: inline-block;
      line-height: 1em;
      padding: .1em .3em .15em 2em
      border-radius: .2em;
      border: 1px solid #d8d8d8;

      background-color: #cccccc;
    }

    .thumb-up {
      background: url('/icons/thumb-up.png') no-repeat 3px center;
    }

    .thumb-down {
      background: url('/icons/thumb-down.png') no-repeat 3px center;
    }
  </style>

  <span class="btn thumb-up">Thumb up</span>
  <span class="btn thumb-down">Thumb down</span>

— Da Beginer
fonte

-2

<li style="background-color: #ffffff;"><a href="https://stackoverflow.com/<%=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 Box Center Immagine e colore di sfondo

1.Prima area dell'immagine fissa di clearpixel 2. Stile area immagine centrale casella 3.li sfondo o stile colore div

— ALPC
fonte

2

Inline CSS non è appropriato se esiste un'altra opzione ragionevole.

— Jon Mitten,

-10

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

— Vikash pathak
fonte