CSS: imagen de fondo en color de fondo

169

Tengo un panel que coloreé de azul si este panel se está seleccionando (haciendo clic en él). Además, agrego un pequeño signo ( .pngimagen) a ese panel, lo que indica que el panel seleccionado ya ha sido seleccionado anteriormente.

Entonces, si el usuario ve, por ejemplo, 10 paneles y 4 de ellos tienen este pequeño signo, sabe que ya ha hecho clic en esos paneles antes. Esto funciona bien hasta ahora. El problema ahora es que no puedo mostrar el pequeño cartel y hacer que el panel sea azul al mismo tiempo.

Configuré el panel en azul con el CSS background: #6DB3F2;y la imagen de fondo con background-image: url('images/checked.png'). Pero parece que el color de fondo está por encima de la imagen, por lo que no puede ver el letrero.

¿Por lo tanto, es posible establecer z-indexes para el color de fondo y la imagen de fondo?

— mkn
fuente

290

Debe usar el nombre completo de la propiedad para cada:

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

O bien, puede usar la abreviatura de fondo y especificarlo todo en una línea:

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

— gandul
fuente

77

El primer método no funcionó para mí. El segundo método abreviado funciona perfectamente.

— Steve Breese

1

Valor de estilo inseguro

— Nexeuz

@Nexeuz ¿por qué considera que esta sintaxis de estilo no es segura para Nexeuz?

— Webwoman

31

Para mí, esta solución no funcionó:

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

Pero en cambio funcionó a la inversa:

<div class="block">
<span>
...
</span>
</div>

el 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
fuente

2

Gracias por el código Francisc !! Como él dice, unir el color de fondo y la imagen tampoco resolvió el problema para mí. Con esa ayuda y pequeños cambios en mi código, logré resolver el problema.

— Mikel

17

Y si quieres generar una sombra negra en el fondo, puedes usar lo siguiente:

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

— Risa__B
fuente

5

Basado en MDN Web Docs , puede establecer múltiples antecedentes utilizando backgroundpropiedades abreviadas o propiedades individuales, excepto background-color. En tu caso, puedes hacer un truco usando linear-gradientasí:

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

El primer elemento (imagen) en el parámetro se colocará en la parte superior. El segundo elemento (fondo de color) se colocará debajo del primero. También puede establecer otras propiedades individualmente. Por ejemplo, para establecer el tamaño y la posición de la imagen.

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

El beneficio de este método es que puede implementarlo en otros casos fácilmente, por ejemplo, si desea que el color azul se superponga a la imagen con cierta opacidad.

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;

Los parámetros de propiedad individuales se establecen respectivamente. Debido a que la imagen se coloca debajo de la superposición de color, sus parámetros de propiedad también se colocan después de los parámetros de superposición de color.

— Luki B. Subekti
fuente

2

problema realmente interesante, no lo he visto todavía. Este código funciona bien para mí. Probado en Chrome e IE9

<html>
<head>
<style>
body{
    background-image: url('img.jpg');
    background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>

— Ramzi Khahil
fuente

2

También puede usar un truco corto para usar la imagen y el color de la siguiente manera:

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

— Kesar Sisodiya
fuente

1

Esto realmente funciona para mí:

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

También puede colocar una sombra sólida y establecer la imagen de fondo:

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

Si la primera opción no funciona por algún motivo y no desea utilizar la sombra del cuadro, siempre puede utilizar un pseudo elemento para la imagen sin HTML adicional:

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

0

Así es como diseñé mis botones de colores con un icono en el fondo

Usé la propiedad "background-color" para el color y la propiedad "background" para la imagen.

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

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

Otra imagen de centro de cuadro de muestra y color de fondo

1.Primero área de imagen fija de píxeles claros 2.estilo cuadro de área de imagen central 3.li fondo o estilo de color div

— alpc
fuente

2

CSS en línea no es apropiado si hay alguna otra opción razonable.

— Jon Mitten

-10

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

— Vikash Pathak
fuente