Por que não consigo usar a imagem de fundo e a cor juntas?

O que estou tentando fazer é mostrar os dois background-colore background-image, para que metade do meu divcubra a imagem de fundo da sombra direita e a outra parte esquerda cubra a cor do fundo.

Mas quando uso background-image, a cor desaparece.

É perfeitamente possível usar uma cor e uma imagem como plano de fundo para um elemento.

Você define os estilos background-colore background-image. Se a imagem for menor que o elemento, você precisará usar o background-positionestilo para posicioná-lo à direita e, para evitar repetições e cobrir todo o plano de fundo, use o background-repeatestilo:

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

Ou usando o estilo composto background:

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

Se você usar o estilo composto backgroundpara definir os dois separadamente, apenas o último será usado, esse é um dos possíveis motivos pelos quais sua cor não está visível:

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

Não há como limitar especificamente a imagem de plano de fundo para abranger apenas parte do elemento; portanto, você deve garantir que a imagem seja menor que o elemento ou que tenha áreas transparentes para que a cor do plano de fundo seja visível.

Para colorir uma imagem, você pode usar CSS3 backgroundpara empilhar imagens e a linear-gradient. No exemplo abaixo, eu uso um linear-gradientsem gradiente real. O navegador trata gradientes como imagens (acho que na verdade gera um bitmap e sobrepõe) e, portanto, está realmente empilhando várias imagens.

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

Produzirá um papel gráfico com tonalidade azul clara, se você tiver o png. Observe que a ordem de empilhamento pode funcionar inversamente ao seu modelo mental, com o primeiro item no topo.

Excelente documentação da Mozilla, aqui:

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

Ferramenta para construir os gradientes:

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

Nota - não funciona no IE11! Vou postar uma atualização quando descobrir o porquê, desde que deveria.

usar

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

E para adicionar a esta resposta, verifique se a imagem em si tem um plano de fundo transparente.

Aqui está um exemplo de uso background-imagee background-colorjuntos:

.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>

Na verdade, existe uma maneira de usar uma cor de fundo com uma imagem de fundo. Nesse caso, a parte do plano de fundo será preenchida com a cor especificada, em vez de branca / transparente.

Para conseguir isso, você precisa definir a backgroundpropriedade assim:

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

Observe a vírgula e o código de cor depois no-repeat; isso define a cor de fundo desejada.

Descobri isso neste vídeo do YouTube , mas não sou afiliado a esse canal ou vídeo de nenhuma maneira.

Torne metade da imagem transparente para que a cor do plano de fundo seja vista através dela.

Caso contrário, basta adicionar outra div ocupando 50% da div do contêiner e flutuar para a esquerda ou direita. Em seguida, aplique a imagem ou a cor nela.

Gecko tem um bug estranho onde definindo o background-colorpara o htmlseletor vai encobrir o background-imagedo elemento do corpo, embora o bodyelemento de fato tem uma maior z-index e você deve ser capaz de ver o corpo da background-imagejuntamente com o html background-colorpuramente baseado em lógica simples.

Gecko Bug

Evite o seguinte ...

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

Gambiarra

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

Olá a todos. Tentei outra maneira de combinar imagem de fundo e cor de fundo:

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();
}

Por favor, deixe-me saber se funcionou para você Obrigado

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