L'immagine di sfondo può estendersi oltre i bordi div?

Question

L'immagine di sfondo può estendersi oltre i bordi div? Overflow: visibile si applica a questo?

Answer 1

No, uno sfondo non può andare oltre il bordo di un elemento.

Lo stile overflow controlla il modo in cui l'elemento reagisce quando il contenuto è maggiore della dimensione specificata dell'elemento.

Tuttavia, un elemento fluttuante all'interno di div può estendersi al di fuori del div e quell'elemento potrebbe avere uno sfondo. L'utilità di ciò è limitata, tuttavia, poiché IE7 e precedenti hanno un bug che fa sì che lo div cresca invece di lasciare che l'elemento floating lo mostri all'esterno.

Answer 2

Dopo un po 'di ricerca: No e No :)

Answer 3

Ho provato a utilizzare valori negativi per background-position ma non ha funzionato (in Firefox almeno). Non c'è davvero alcuna ragione per farlo. Basta impostare l'immagine di sfondo su uno degli elementi più in alto nella gerarchia.

Answer 4

No, lo sfondo non si estenderà oltre i confini. Ma puoi allungare il confine fino a quello che vuoi usando padding e qualche intelligente aggiustamento dei margini negativi nella posizione &.

Answer 5

In seguito il consiglio del Kijin, mi piacerebbe condividere la mia soluzione per gli offset di immagine:

/* 
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; 
} 

Ho usato questo esempio su un semplice elemento div < div id="logo"></div> per posizionare il mio logo con una verticale di offset -50px . (Si noti che le impostazioni di margine/padding combinati assicurarsi di non incorrere in problemi di margine che crollano.)

Answer 6

non

possibile impostare un'immagine di sfondo 'fuori' è elemento,

ma si può fare quello che vuoi usando l'elemento 'PSEUDO' e fai quello che vuoi e posizionalo dove vuoi. vedere qui: ho impostato la freccia al di fuori della portata

ecco il codice

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> 

forte testo

.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; 
     } 

vedere h Un esempio: http://jsfiddle.net/568Zy/11/

Answer 7

Capisco che è davvero molto tardi, e non sono nemmeno sicuro se questa è la migliore pratica, ma ho trovato un modo per farlo con il mio footer. La mia ultima sezione aveva un'immagine di sfondo che volevo far traboccare nel footer e l'ho aggiustata con poche righe di CSS. Inoltre ho aggiunto un po 'di padding alla sezione con l'immagine di sfondo.

footer{ 
background-color: transparent!important; 
top: -50px; 
margin-bottom: -50px; 
}