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

imagen de fondo sin repetir css

Question

Lo que intento hacer es mostrar tanto background-color background-image , de modo que la mitad de mi div cubra la imagen de fondo de la sombra correcta, y la otra parte izquierda cubrirá el color de fondo.

Pero cuando uso background-image , el color desaparece.

Answer 1

Aquí hay un ejemplo del uso de background-image y background-color juntos:

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

Answer 2

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

Establece los estilos de background-color background-image . Si la imagen es más pequeña que el elemento, debe usar el estilo de background-position para colocarla a la derecha, y para evitar que se repita y cubra todo el fondo, utilice el estilo de background-repeat :

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

O usando el background estilo compuesto:

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

Si usa el background estilo compuesto para 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 que cubra 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.

Answer 3

Gecko tiene un error raro cuando el ajuste del background-color de background-color para el selector html cubrirá la background-image de background-image del elemento del cuerpo a pesar de que el elemento del body en efecto tiene un mayor índice Z y usted debería poder ver el background-image del cuerpo. background-image junto con el background-color html basado puramente en lógica simple.

Gecko Bug

Evite lo siguiente ...

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

Trabajar alrededor

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

Answer 4

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

De lo contrario, simplemente agregue otro div tomando un 50% hasta el div del contenedor y flote hacia la izquierda o hacia la derecha. A continuación, aplique la imagen o el color.

Answer 5

Hola a todos, probé de otra manera para combinar background-image y background-color juntos:

HTML

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

CSS

article{height: 490px;background:url("Your IMAGE") no-repear center cover;opacity:1} 
canvas{widht: 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, hágamelo saber si funcionó para usted Gracias

Answer 6

Para matizar una imagen, puede usar background CSS3 para apilar imágenes y un linear-gradient . En el ejemplo a continuación, uso un linear-gradient real. El navegador trata los degradados como imágenes (creo que en realidad genera un mapa de bits y se 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 puede funcionar a la inversa 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 degradados:

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.

Answer 7

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

Answer 8

utilizar

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

Answer 9

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