css - poner - insertar imagen html
Capas de imágenes en CSS: ¿es posible poner 2 imágenes en el mismo elemento? (9)
No olvides que puedes aplicar estilos al elemento HTML:
html {
background: url(images/whatever.gif);
}
Supongamos que estoy configurando una imagen de fondo para una página web en CSS de esta manera:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
background: url(images/desk.gif) repeat bottom left;
}
¿Hay alguna forma de superponer una segunda imagen sobre el escritorio.gif dentro del propio elemento del cuerpo, o es la única manera de crear una clase separada y usar el eje z?
Lo siento, es una pregunta simple, pero he estado tratando de resolver esto y, aunque no he podido hacerlo funcionar, tampoco he encontrado una idea clara de la idea en ningún lugar en línea ... por lo tanto, es Hay un camino, o es esto solo un no se puede hacer?
¡Gracias!
La única forma es usar otro contenedor. Cada elemento puede contener solo una imagen de fondo.
Use posicionamiento absoluto y un índice z para obtener el segundo elemento en la parte superior.
Los fondos en capas son parte del borrador de trabajo de CSS3 pero, hasta donde yo sé, el soporte para ellos se limita a navegadores basados en WebKit / KHTML como Safari, Chrome, Konqueror y OmniWeb.
Usando su código de ejemplo, esto se vería así:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
background: url("images/top.gif") left bottom repeat,
url("images/desk.gif") left bottom repeat;
}
Ya publiqué la solución en una pregunta duplicada, pero para cualquiera que requiera esta información la publicaré aquí también.
Por lo que yo sé, no es posible ponerlo en la misma capa, pero es posible poner varias imágenes en divisiones separadas una encima de la otra, y ha sido implementado por el popular sitio web de pruebas de usabilidad Silverback (verifique el fondo para ver cómo ha sido acodado). Si miras el código fuente, puedes ver que el fondo está compuesto por varias imágenes, una encima de la otra.
Aquí está el artículo que demuestra cómo hacer el efecto se puede encontrar en la vitamina . Un concepto similar para envolver estas capas de "piel de cebolla" se puede encontrar en A List Apart .
El enlace arriba mencionado describe mejor lo que está haciendo ...
Hoy en día esto se puede hacer en todos los navegadores "modernos" (no <IE9, afaik). Puedo confirmar que funciona en Firefox, Opera, Chrome. No hay ninguna razón para no hacerlo, siempre y cuando tenga una solución de respaldo decente para los navegadores más antiguos / IE.
Para la sintaxis puede elegir entre
background:url(..) repeat-x left top, url(..) repeat-x left bottom;
y
background-image:url(..), url(..); background-position:left top, left bottom; background-repeat:repeat-x;
No necesita los saltos de línea, pero la coma es importante.
¡Atención! A continuación, se crearán dos fondos, aunque haya especificado solo una url de imagen:
background-image:url(..); background-position:top, bottom;
Y, por supuesto, existe la alternativa de utilizar contenedores anidados, pero esto hinchará tu html.
En resumen, no es posible. Puede hacer esto, pero necesita agregar un segundo objeto HTML a la página para que funcione. Entonces, por ejemplo, coloque un bloque div justo debajo de su cuerpo, y asigne el segundo fondo a ese objeto.
¡Espero que esto ayude!
siguiendo este enlace para capas en capa en CSS