Offset di posizione dellimmagine di sfondo css

Se hai bisogno di posizionare a in CSS 20px da sinistra e 10px dall'alto, è facile. Puoi fare . Ma cosa succede se si vuole posizionarlo a 20px da destra e a 10px dal basso ?

Supponiamo anche di non conoscere l'esatta larghezza e altezza dell'elemento, il che è probabile, a causa dei layout fluidi e dei contenuti dinamici. Se lo facessimo, potremmo semplicemente fare un po' di matematica e usare la sintassi normale.

Una richiesta perfettamente ragionevole, come si suol dire. Ecco alcuni modi per farlo.

La sintassi a quattro valori per background-position

Questo è il modo più semplice. I valori di lunghezza vengono combinati con una qualsiasi delle parole chiave in alto/a destra/in basso/a sinistra (non al centro). Quindi, per il nostro esempio:

usando questo, puoi scostare a da uno qualsiasi dei quattro angoli di un elemento.

Supporto del browser, secondo MDN: Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+. Il più grande pericolo è Android.

Ho testato Android 4.0, 4.1 e 4.2 e non ha funzionato. Ma Android 4.4 lo supportava.

Usando calc()

Puoi continuare a usare la sintassi a due valori di , ma farlo usando le lunghezze create tramite . Ad esempio:

il supporto del browser è leggermente migliore, con Chrome di nuovo a 19+, Firefox di nuovo a 4+ e Safari di nuovo a 6+ (tutti preceduti).

Il browser stock Android aveva lo stesso supporto della sintassi a quattro valori di cui sopra.

Se hai bisogno di misurare l'altezza/larghezza dell'elemento, conosci la dimensione del , quindi regola il CSS secondo necessità.

Utilizzo di jQuery:

Demo

Ecco tutti e tre i modi: