¿Puede la imagen de fondo extenderse más allá de las fronteras de div? ¿Desbordamiento: visible se aplica a esto?¿Puede la imagen de fondo extenderse más allá de las fronteras de div?
Respuesta
No, un fondo no puede ir más allá del borde de un elemento.
El estilo overflow
controla cómo reacciona el elemento cuando el contenido es mayor que el tamaño especificado del elemento.
Sin embargo, un elemento flotante dentro de div
puede extenderse fuera del div, y ese elemento podría tener un fondo. Sin embargo, la utilidad de esto es limitada, ya que IE7 y versiones anteriores tienen un error que causa que div
crezca en lugar de dejar que el elemento flotante se muestre fuera de él.
Después de un poco de la investigación: NO y NO :)
de Acción de Gracias dio la respuesta a Guffa primo le dio algo más de detalle – Yarin
Intenté usar valores negativos para background-position
pero no funcionó (al menos en Firefox). Realmente no hay ninguna razón para que lo haga. Simplemente configure la imagen de fondo en uno de los elementos más arriba en la jerarquía.
valores de posición de fondo negativo para las imágenes de sprite, por lo que en realidad se apoya en el fondo * No * mostrando fuera del elemento. :) – Guffa
No, el fondo no se extenderá más allá de los bordes. Pero puede estirar el borde tanto como desee utilizando padding
y algunos ajustes inteligentes de los márgenes negativos & posición.
Siguiendo el consejo de Kijin, me gustaría compartir mi solución para las compensaciones de imagen:
/*
Only effective cross-browser method to offset image out of bounds of container AFAIK,
is to set as background image on div and apply matching margin/padding offsets:
*/
#logo {
margin:-50px auto 0 auto;
padding:50px 0 0 0;
width:200px;
height:200px;
background:url(../images/logo.png) no-repeat;
}
He utilizado este ejemplo en un simple elemento div < div id="logo"></div>
para posicionar mi logotipo con un desplazamiento vertical de -50px . (Tenga en cuenta que los valores de margen/relleno combinados aseguran que no tenga problemas de margen colapso.)
El relleno debe ser positivo, no negativo. Un relleno negativo no es válido, por lo que se ignorará el estilo. – Guffa
@ Guffa- Solucionado -gracias – Yarin
Esto funciona bien (probado con IE7, IE8, IE9, Firefox, Safari, Chrome), ¡gracias! – nachomaans
posible establecer una imagen de fondo 'fuera' es elemento,
pero se puede hacer lo que desea con el uso de elemento 'PSEUDO' y hacer que el tamaño que desee y colocarlo donde quieras. ver aquí: he puesto la flecha fuera del lapso de
aquí está el código
HTML:
<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>
texto fuerte
.tooltip{position:relative; float:left;}
.tooltip .msg {font-size:12px;
background-color:#fff9ea;
border:2px #e1ca82 solid;
border-radius:5px;
background-position:left;
position:absolute;
padding:4px 5px 4px 10px;
top:0%; left:104%;
z-index:9000; position:absolute; max-width:250px;clear:both;
min-width:150px;}
.tooltip .msg:before {
background:url(tool_tip.png);
background-repeat:no-repeat;
content: " ";
display: block;
height: 20px;
position: absolute;
left:-10px; top:1px;
width: 20px;
z-index: -1;
}
ver h Ejemplo: http://jsfiddle.net/568Zy/11/
Entiendo que esto es realmente muy tarde, y ni siquiera estoy seguro de si esto es una buena práctica, pero encontré una pequeña forma de hacerlo con mi pie de página. Mi última sección tenía una imagen de fondo que quería desbordar en el pie de página y la arreglé con unas pocas líneas de CSS. También se agregó un poco de relleno en la sección con la imagen de fondo.
footer{
background-color: transparent!important;
top: -50px;
margin-bottom: -50px;
}
Ya es genial para superponer cosas en el eje Y – Sgnl
- 1. Imagen de fondo cortó más allá de la ventana gráfica
- 2. imagen va más allá de los límites de contenedores div
- 3. Ampliar div hijo más allá del contenedor div
- 4. ¿Puede una imagen de fondo ser más grande que el div mismo?
- 5. Div Imagen de fondo Z-Index Problema
- 6. WPF: ¿Cómo evitar que una imagen salga de las fronteras de Canvas?
- 7. imagen de fondo Ajustar a div
- 8. css imagen de fondo ajuste a DIV
- 9. ¿Cómo puedo extender el fondo de un elemento más allá de su contenedor?
- 10. Precargar imagen de fondo
- 11. Ocultar texto yendo más allá del elemento DIV
- 12. imagen Configuración div fondo utilizando jQuery
- 13. Más allá de los patrones de diseño?
- 14. ¿Cómo centrar una imagen (de fondo) dentro de un div?
- 15. ¿Puede GVIM tener una imagen de fondo?
- 16. ¿deberían las fronteras afectar el diseño?
- 17. jQuery cambio div Imagen de fondo con fadeIn/salida
- 18. no puede extenderse backbone.events en CoffeeScript
- 19. Falló la recuperación de la tarea más allá de max_retries
- 20. fondo pie de página debe extenderse a la parte inferior del navegador
- 21. Colocar imagen de fondo fuera del borde que contiene div
- 22. Div con imagen de fondo y sin contenido sin mostrar
- 23. Ir más allá de la función de optimización de R
- 24. El ancho de la tabla va más allá del borde div
- 25. eliminar la imagen de fondo del estilo
- 26. imagen de fondo transparente
- 27. ¿Se pueden eliminar los bordes o las fronteras de UISearchBar?
- 28. Jquery cambiar fondo de div padre
- 29. Cambiar la opacidad de la imagen de fondo
- 30. Haz un triángulo CSS con fondo transparente en un div con imagen blanca BG?
gracias interesante- – Yarin
Véase mi respuesta para una solución – Yarin