MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Risultati di ricerca

    background-position

     

    Sommario

    Edit section

    background-position imposta la posizione iniziale dell'immagine di sfondo impostata.

    Sintassi

    Edit section
    background-position: [ <percentuale> | <lunghezza> | left | center | right  ] 
                         [ <percentuale> | <lunghezza> | top  | center | bottom ] ? ;
    
    background-position: [ top | center | bottom ];
    
    background-position: inherit;
    

    Valori

    Edit section
    <percentuale>
    Con un valore di '0% 0%', l'angolo in alto a destra dell'immagine è allineato con l'angolo in alto a destra dell'angolo del padding del box. Un valore di '100% 100%' posiziona l'angolo in basso a destra dell'immagine nell'angolo in basso a destra dell'area di padding del box. Con un valore, per esempio, di '14% 84%', l'angolo in alto a sinistra dell'immagine sarà al punto '14%; 84%' dell'area di padding del box.
    <lunghezza>
    Con un valore di '2cm 1cm', l'angolo in alto a sinistra dell'immagine si trova 2cm a destra e 1cm più in basso dell'angolo in alto a sinistra dell'area di padding del box.
    top left e left top
    Come '0% 0%'.
    top, top center, e center top
    Come '50% 0%'.
    right top e top right
    Come '100% 0%'.
    left, left center, e center left
    Come '0% 50%'.
    center e center center
    Come '50% 50%'.
    right, right center, e center right
    Come '100% 50%'.
    bottom left e left bottom
    Come '0% 100%'.
    bottom, bottom center, e center bottom
    Come '50% 100%'.
    bottom right e right bottom
    Come '100% 100%'.

    Se viene specificato solo un valore, quello imposta la distanza orizzontale, e la posizione verticale si imposta a 50%. Al contrario, il primo valore specifica la posizione orizzontale. Sono possibili combinazioni di parole, lunghezze o percentuali, ma se si mischiano le parole con i valori, 'left' e 'right' potrebbero solo essere usati come primo valore (indicano una posizione orizzontale), mentre 'top' e 'bottom' solo per il secondo valore (indicano infatti una posizione verticale).

    Esempi

    Edit section
    .exampleone {
    	background-image: url("logo.png");
    	background-position: top center;
    }
    
    .exampletwo {
    	background-image: url("logo.png");
    	background-position: 25% 75%;
    }
    
    .examplethree {
    	background-image: url("logo.png");
    	background-position: 2cm bottom;
    }
    
    .examplefour {
    	background-image: url("logo.png");
    	background-position: center 10%;
    }
    
    .examplefive {
    	background-image: url("logo.png");
    	background-position: 2cm 50%;
    }
    
    

    Specifiche

    Edit section

    Compatibilità tra browser

    Edit section
    Browser Versione più vecchia
    Internet Explorer 4
    Firefox 1
    Netscape 6
    Opera 3.5

     

    Etichette del documento e nomi di chi ha collaborato alla sua stesura

    Contributors to this page: teoli, pbrenna
    Ultima modifica di: teoli,