Perché non riesco a usare insieme l'immagine e il colore di sfondo?

Quello che sto cercando di fare è mostrare entrambi background-colore background-image, in modo tale che metà dei miei divcoprirà l'immagine di sfondo dell'ombra destra e l'altra parte sinistra coprirà il colore di sfondo.

Ma quando uso background-image, il colore scompare.

È perfettamente possibile utilizzare sia un colore che un'immagine come sfondo per un elemento.

Hai impostato gli stili background-colore background-image. Se l'immagine è più piccola dell'elemento, è necessario utilizzare lo background-positionstile per posizionarlo a destra e per evitare che si ripeta e copra l'intero sfondo, si utilizza lo background-repeatstile:

background-color: green;
background-image: url(images/shadow.gif);
background-position: right;
background-repeat: no-repeat;

O usando lo stile composito background:

background: green url(images/shadow.gif) right no-repeat;

Se si utilizza lo stile composito backgroundper impostare entrambi separatamente, verrà utilizzato solo l'ultimo, questa è una possibile ragione per cui il colore non è visibile:

background: green; /* will be ignored */
background: url(images/shadow.gif) right no-repeat;

Non è possibile limitare in modo specifico l'immagine di sfondo per coprire solo una parte dell'elemento, quindi è necessario assicurarsi che l'immagine sia più piccola dell'elemento o che abbia aree trasparenti, affinché il colore di sfondo sia visibile.

Per colorare un'immagine, puoi usare CSS3 backgroundper impilare immagini e a linear-gradient. Nell'esempio seguente, utilizzo un linear-gradientsenza gradiente reale. Il browser tratta i gradienti come immagini (penso che in realtà generi una bitmap e la sovrapponga) e quindi sta effettivamente impilando più immagini.

background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;

Produrrà una carta millimetrata con una tinta azzurra, se avessi il png. Nota che l'ordine di sovrapposizione potrebbe funzionare al contrario del tuo modello mentale, con il primo oggetto in cima.

Ottima documentazione di Mozilla, qui:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

Strumento per la creazione dei gradienti:

http://www.colorzilla.com/gradient-editor/

Nota: non funziona in IE11! Pubblicherò un aggiornamento quando scoprirò perché, dal momento che dovrebbe.

uso

background:red url(../images/samle.jpg) no-repeat left top;

E per aggiungere a questa risposta, assicurati che l'immagine stessa abbia uno sfondo trasparente.

Ecco un esempio di utilizzo background-imagee background-colorinsieme:

.box {
  background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px);
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
  display: inline-block;
}

<div class="box" style="background-color:orange"></div>
<div class="box" style="background-color:green"></div>
<div class="box" style="background-color:blue"></div>

In realtà c'è un modo per usare un colore di sfondo con un'immagine di sfondo. In questo caso, la parte di sfondo verrà riempita con quel colore specificato anziché bianco / trasparente.

Per ottenere ciò, è necessario impostare la backgroundproprietà in questo modo:

.bg-image-with-color {
    background: url("example.png") no-repeat, #ff0000;
}

Nota la virgola e il codice colore dopo no-repeat; questo imposta il colore di sfondo che desideri.

L'ho scoperto in questo video di YouTube , tuttavia non sono affiliato a quel canale o video in alcun modo.

Rendi trasparente metà dell'immagine in modo che il colore di sfondo sia visibile attraverso di essa.

Altrimenti aggiungi semplicemente un altro div che prende il 50% in più del div contenitore e galleggialo a sinistra oa destra. Quindi applicare l'immagine o il colore.

Gecko ha un errore strano dove impostando il background-colorper il htmlselettore coprirà la background-imagedell'elemento corpo anche se l' bodyelemento in effetti ha una maggiore z-index e si dovrebbe essere in grado di vedere il corpo di background-imageinsieme alla html background-colorbasata esclusivamente sulla logica semplice.

Gecko Bug

Evita quanto segue ...

html {background-color: #fff;}
body {background-image: url(example.png);}

Aggirare

body {background-color: #fff; background-image: url(example.png);}

Ciao a tutti, ho provato un altro modo per combinare immagine di sfondo e colore di sfondo:

HTML

<article><canvas id="color"></canvas></article>

CSS

article {
  height: 490px;
  background: url("Your IMAGE") no-repeat center cover;
  opacity:1;
} 

canvas{
  width: 100%; 
  height: 490px; 
  opacity: 0.9;
}

JAVASCRIPT

window.onload = init();

var canvas, ctx;

function init(){
  canvas = document.getElementeById('color'); 
  ctx = canvas.getContext('2d'); 
  ctx.save();  
  ctx.fillstyle = '#00833d'; 
  ctx.fillRect(0,0,490,490);ctx.restore();
}

Per favore fatemi sapere se ha funzionato per voi Grazie

background:url(directoryName/imageName.extention) bottom left no-repeat; 
background-color: red;