¿Por qué no puedo usar la imagen de fondo y el color juntos?

Lo que intento hacer es mostrar ambos background-colory background-image, de modo que la mitad de mi divcubra la imagen de fondo de la sombra derecha, y la otra parte izquierda cubra el color de fondo.

Pero cuando lo uso background-image, el color desaparece.

Es perfectamente posible utilizar tanto un color como una imagen como fondo para un elemento.

Usted establece los estilos background-colory background-image. Si la imagen es más pequeña que el elemento, debe usar el background-positionestilo para colocarlo a la derecha, y para evitar que se repita y cubra todo el fondo, use el background-repeatestilo:

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

O usando el estilo compuesto background:

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

Si usa el estilo compuesto backgroundpara establecer ambos por separado, solo se usará el último, esa es una posible razón por la cual su color no es visible:

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

No hay forma de limitar específicamente la imagen de fondo para cubrir solo una parte del elemento, por lo que debe asegurarse de que la imagen sea más pequeña que el elemento, o que tenga áreas transparentes, para que el color de fondo sea visible.

Para teñir una imagen, puede usar CSS3 backgroundpara apilar imágenes y a linear-gradient. En el siguiente ejemplo, uso un linear-gradientsin gradiente real. El navegador trata los gradientes como imágenes (creo que en realidad genera un mapa de bits y lo superpone) y, por lo tanto, en realidad está apilando varias imágenes.

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

Producirá un papel cuadriculado con tinte azul claro, si tuviera el png. Tenga en cuenta que el orden de apilamiento podría funcionar al revés de su modelo mental, con el primer elemento en la parte superior.

Excelente documentación de Mozilla, aquí:

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

Herramienta para construir los gradientes:

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

Nota: ¡no funciona en IE11! Publicaré una actualización cuando descubra por qué, ya que se supone que debe hacerlo.

utilizar

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

Y para agregar a esta respuesta, asegúrese de que la imagen tenga un fondo transparente.

Aquí hay un ejemplo de uso background-imagey 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>

En realidad, hay una manera de usar un color de fondo con una imagen de fondo. En este caso, la parte de fondo se rellenará con ese color especificado en lugar de uno blanco / transparente.

Para lograr eso, debe establecer la backgroundpropiedad de esta manera:

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

Tenga en cuenta la coma y el código de color después no-repeat; Esto establece el color de fondo que desea.

Descubrí esto en este video de YouTube , sin embargo, no estoy afiliado a ese canal o video de ninguna manera.

Haga que la mitad de la imagen sea transparente para que el color de fondo se vea a través de ella.

De lo contrario, simplemente agregue otro div ocupando el 50% del div del contenedor y flote hacia la izquierda o hacia la derecha. Luego aplique ya sea la imagen o el color.

Gecko tiene un error raro en el establecimiento de la background-colorpara el htmlselector cubrirá hasta la background-imagedel elemento del cuerpo a pesar de que el bodyelemento de hecho tiene un mayor índice z y usted debería ser capaz de ver el cuerpo de background-imagejunto con la html background-colorbasada puramente en la lógica simple.

Gecko Bug

Evita lo siguiente ...

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

Solución alterna

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

Hola a todos, probé otra forma de combinar la imagen de fondo y el color de fondo:

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, avíseme si funcionó para usted Gracias

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