poner - CSS: imagen de fondo en el color de fondo
imagen de fondo en body con css (8)
Y si quiere Generar una Sombra Negra en el fondo, puede 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");
Tengo un panel que coloreé en azul si este panel está siendo seleccionado (haciendo clic en él). Además, agrego un pequeño signo (imagen .png ) a ese panel, 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 letrero, sabe que ya ha hecho clic en esos paneles anteriormente. Esto funciona bien hasta el momento. El problema ahora es que no puedo mostrar el letrero pequeño y azul el panel al mismo tiempo.
Configuré el panel en azul con el background: #6DB3F2; CSS background: #6DB3F2; y la imagen de background-image: url(''images/checked.png'') 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 signo.
Por lo tanto, ¿es posible establecer z-index para el color de fondo y la imagen de fondo?
En base a los Documentos web de MDN , puede establecer múltiples fondos usando background propiedad de background abreviado o las propiedades individuales, excepto el background-color . En tu caso, puedes hacer un truco usando linear-gradient como este:
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 fácilmente en otros casos, 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.
Necesita usar el nombre de propiedad completo para cada uno:
background-color: #6DB3F2;
background-image: url(''images/checked.png'');
O bien, puede usar la taquigrafía de fondo y especificarla en una sola línea:
background: #6DB3F2 url(''images/checked.png'');
Para mí, esta solución no funcionó:
background-color: #6DB3F2;
background-image: url(''images/checked.png'');
Pero en cambio, funcionó de la otra manera:
<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%;
}
También puede usar el truco corto para usar imágenes y colores de esta manera:
body {
background:#000 url(''images/checked.png'');
}
problema realmente interesante, no lo he visto todavía. este código funciona bien para mí. probado en cromo y IE9
<html>
<head>
<style>
body{
background-image: url(''img.jpg'');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
<li style="background-color: #ffffff;"><a href="/<%=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.Primera imagen fija de píxeles claros imagen 2. centro imagen de la zona cuadro de la caja 3.li fondo o div estilo de color
body
{
background-image:url(''image/img2.jpg'');
margin: 0px;
padding: 0px;
}