css - open - Posicionamiento de imágenes de fondo múltiples
plantillas contact form 7 (8)
Tengo tres imágenes de fondo, todas de ancho 643px. Quiero que se establezcan así:
imagen superior (altura de 12px) sin repetición
imagen media repeat-y
imagen inferior (altura de 12px) sin repetición
Parece que no puedo hacerlo sin hacer que se superpongan (lo cual es un problema porque las imágenes son parcialmente transparentes), ¿es posible algo así?
background-image: url(top.png),
url(bottom.png),
url(middle.png);
background-repeat: no-repeat,
no-repeat,
repeat-y;
background-position: left 0 top -12px,
left 0 bottom -12px,
left 0 top 0;
Aquí hay un método que usa 3 div para cada una de las imágenes Superior , Medio e Inferior que son transparentes para aplicar a su página web.
Fondo de pantalla es opcional.
Probado en navegadores modernos y es IE8 amigable.
Este método le permite tratar el elemento del cuerpo como debe ser tratado, es decir, el marcado de su página web no necesita estar en un envoltorio o elemento que lo contenga.
Ejemplo jsFiddle
jsFiddle Ejemplo con centrado centrado
Dado que el ejemplo anterior utiliza contenido del marcador de posición de la imagen que no tiene transparencia para las imágenes Superior e Inferior, puede verificar que el marcado funcione con transparencia con este JsFiddle que utiliza iconos mini transparentes en el modo de repetición HERE .
Creo que z-index lo solucionará porque z-index solo afecta a los elementos CHILD, lo que significa que no puedes estropear nada más en la página que usa z-index .
imágenes superiores e inferiores z-index:3;
imagen media z-index:2; background-repeat:repeat-y;
De hecho, encontré una solución más simple, porque estaba teniendo el mismo problema con una navegación horizontal.
En lugar de agregar código como las otras respuestas, solo tiene que enumerarlo de manera diferente en su CSS. La imagen del centro que se repite debe aparecer en último lugar, no primero ni segundo.
En mi código se ve así:
background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;
Intenta hacerlo así:
background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;
}
EDITAR: Fue solo un ejemplo, pero aquí está el CSS con tu CSS:
background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat;
}
La única forma (práctica, no amenazante para el cabello) que veo es hacer eso en Javascript, cuando la página se cargó, y cuando se redimensiona, con un lienzo del tamaño adecuado para el interior y las 3 imágenes: dibujar el primero una vez en la parte superior, dibuje el segundo tantas veces como sea necesario para cubrir el resto del lienzo y dibuje el tercero en la parte inferior del lienzo. Coloque el lienzo en 0,0 con un índice Z ridículamente negativo.
He intentado con 3 imágenes (643 x 12, 100 y 12) y, por supuesto, el primer problema que vi es que la tercera imagen se dibuja sobre parte de la última iteración de la segunda imagen, a menos que tengas una ventana altura de exactamente 12 + 12 + (p2.height * X), tendrá cierta superposición. Pero eso es esperado, ¿verdad?
Si puede agregar relleno / bordes al bloque igual a los fondos que desea colocar sin superponer otro bloque, puede usar el background-clip y background-origin para colocar los fondos superior e inferior sobre los bordes / bordes, y la repetición fondo sobre el contenido / paddings + contenido.
Aquí hay un ejemplo: http://dabblet.com/gist/2668803
Para su código, posiblemente deba agregar algo como esto:
padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-origin: padding-box, padding-box, content-box;
o
border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-origin: border-box, border-box, padding-box;
Y obtendrás lo que necesitas. Si no puede obtener los rellenos / bordes, el pseudo-elemento como ScottS mencionado funcionaría perfectamente.
Tu problema es que el repeat-y va a llenar toda la altura, sin importar dónde lo coloques inicialmente. Por lo tanto, se superpone a su parte superior e inferior.
Una solución es empujar el fondo que se repite en un pseudo elemento posicionado fuera del contenedor por 12px en la parte superior e inferior. El resultado se puede ver aquí (la opacidad en la demostración es solo para mostrar que no hay superposición). Sin opacidad, mira aquí . El código relevante (probado en los navegadores CSS3: IE9, FF, Chrome):
CSS
div {
position: relative;
z-index: 2;
background: url(top.png) top left no-repeat,
url(bottom.png) bottom left no-repeat;
}
div:before {
content: '''';
position: absolute;
z-index: -1; /* push it to the background */
top: 12px; /* position it off the top background */
right: 0;
bottom: 12px; /* position it off the bottom background */
left: 0;
background: url(middle.png) top left repeat-y;
}
Si necesitabas o necesitabas soporte para IE8 (que no admite varios fondos), puedes poner el fondo superior en el div principal y poner el fondo inferior usando el div:after pseudo elemento ubicado en la parte inferior del contenedor.
Una forma radical pero efectiva de lidiar con esto, si:
- desea aplicar fondos sin superposición a un ": antes"
- el elemento ": before" como altura máxima conocida
&:before {
background: url(''vertical-line.png'') no-repeat 0px,
url(''vertical-line-repeat.png'') no-repeat 140px,
url(''vertical-line-repeat.png'') no-repeat 200px,
url(''vertical-line-repeat.png'') no-repeat 260px,
url(''vertical-line-repeat.png'') no-repeat 320px,
url(''vertical-line-repeat.png'') no-repeat 380px,
url(''vertical-line-repeat.png'') no-repeat 440px,
url(''vertical-line-repeat.png'') no-repeat 500px,
url(''vertical-line-repeat.png'') no-repeat 560px,
url(''vertical-line-repeat.png'') no-repeat 620px,
url(''vertical-line-repeat.png'') no-repeat 680px,
url(''vertical-line-repeat.png'') no-repeat 740px;
}