Offset un’immagine di sfondo da destra usando CSS

C’è un modo per posizionare un’immagine di sfondo un certo numero di pixel dalla destra del suo elemento?

Ad esempio, per posizionare qualcosa di un certo numero di pixel (ad esempio, 10) da sinistra , questo è come lo farei:

#myElement { background-position: 10px 0; } 

Ho trovato utile questa funzionalità CSS3:

 /* to position the element 10px from the right */ background-position: right 10px top; 

Per quanto ne so, questo non è supportato in IE8. Nella versione più recente di Chrome / Firefox funziona perfettamente.

Vedi Posso usare per i dettagli sui browser supportati.

Fonte usata: http://tanalin.com/en/blog/2011/09/css3-background-position/

!! Risposta obsoleta, poiché CSS3 ha portato questa funzionalità

C’è un modo per posizionare un’immagine di sfondo un certo numero di pixel dalla destra del suo elemento?

No.

Soluzioni alternative popolari includono

  • impostando invece un margin-right sull’elemento
  • aggiungere pixel trasparenti all’immagine stessa e posizionarla in top right
  • o calcolare la posizione usando jQuery dopo che la larghezza dell’elemento è nota.

La soluzione più semplice è usare le percentuali. Questa non è esattamente la risposta che stavi cercando da quando hai chiesto la precisione dei pixel, ma se hai solo bisogno di qualcosa con una piccola imbottitura tra il lato destro e l’immagine, dare una posizione del 99% di solito funziona abbastanza bene.

Codice:

 /* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */ div.middleleft { background: url("/images/source.jpg") 99% center no-repeat; } 

Risposta obsoleta: ora è implementata nei principali browser, vedi le altre risposte a questa domanda.

CSS3 ha modificato la specifica della background-position di background-position modo che funzioni con un punto di origine diverso. Sfortunatamente, non riesco a trovare alcuna prova che sia stato implementato in tutti i principali browser.

http://www.w3.org/TR/css3-background/#the-background-position Vedi esempio 12.

 background-position: right 3em bottom 10px; 

Come proposto qui , questa è una bella soluzione cross browser che funziona perfettamente:

 background: url('/img.png') no-repeat right center; border-right: 10px solid transparent; 

L’ho usato poiché la funzione CSS3 di specificare gli offset proposti nella risposta contrassegnata come risolvendo la domanda non è ancora supportata nei browser. Per esempio

La risposta più appropriata è la nuova syntax a quattro valori per la posizione di sfondo, ma finché tutti i browser non lo supportano, il tuo approccio migliore è una combinazione di risposte precedenti nel seguente ordine:

 background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */ background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */ background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */ 

Un semplice ma sporco trucco è semplicemente aggiungere l’offset che vuoi all’immagine che stai usando come sfondo. non è gestibile, ma fa il lavoro.

Questo funzionerà sulla maggior parte dei browser moderni … a parte IE (supporto browser) . Anche se quella pagina elenca> = IE9 come supportato, i miei test non erano d’accordo.

Puoi usare la proprietà calc () css3 in questo modo;

 .class_name { background-position: calc(100% - 10px) 50%; } 

Per me questo è il modo più pulito e logico per ottenere un margine a destra. Uso anche un fallback di usare border-right: 10px solid transparent; per IE.

Ok, se capisco che cosa stai chiedendo, lo faresti;

Hai il tuo contenitore DIV chiamato #main-container e .my-element che è al suo interno. Usa questo per iniziare;

 #main-container { position:relative; } /*To make the element absolute - floats above all else within the parent container do this.*/ .my-element { position:absolute; top:0; right:10px; } /*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/ .my-element { float:right; margin-right:10px; } 

A proposito, è meglio esercitarsi a usare le classi se si fa riferimento a un elemento di livello inferiore all’interno di una pagina (presumo che tu stia cambiando il mio nome sopra.

Le specifiche CSS3 che consentono origini diverse per la posizione di sfondo ora sono supportate in Firefox 14 ma non ancora in Chrome 21 (apparentemente IE9 le supporta in parte, ma non l’ho testato personalmente)

Oltre al problema di Chrome a cui è stato fatto riferimento @MattyF, c’è un riepilogo più sintetico qui: http://code.google.com/p/chromium/issues/detail?id=95085

Se hai elementi proporzionati, puoi usare:

 .valid { background-position: 98% center; } .half .valid { background-position: 96% center; } 

In questo esempio, .valid sarebbe la class con l’immagine e .half sarebbe una riga con metà della dimensione di quella standard.

Sporco, ma funziona come un fascino ed è ragionevolmente gestibile.

Se si desidera utilizzare questo per aggiungere frecce / altre icone a un pulsante, ad esempio, è ansible utilizzare gli pseudo-elementi CSS?

Se è davvero un’immagine di sfondo per l’intero pulsante, tendo a incorporare la spaziatura nell’immagine e basta usarla

 background-position: right 0; 

Ma se devo aggiungere ad esempio una freccia progettata a un pulsante, tendo ad avere questo html:

 Read more 

E tendono a fare quanto segue con i CSS:

 .read-more{ position: relative; padding: 6px 15px 6px 35px;//to create space on the right font-size: 13px; font-family: Arial; } .read-more:after{ content: ''; display: block; width: 10px; height: 15px; background-image: url('../images/btn-white-arrow-right.png'); position: absolute; right: 12px; top: 10px; } 

Usando il selettore: after, aggiungo un elemento usando il CSS solo per contenere questa piccola icona. Puoi fare lo stesso semplicemente aggiungendo uno span o elemento all’interno dell’elemento-a. Ma penso che questo sia un modo più semplice per aggiungere icone ai pulsanti ed è supportato da più browser.

puoi controllare il violino qui: http://codepen.io/anon/pen/PNzYzZ

usa il centro destra come posizione, quindi aggiungi un bordo trasparente per sfalsarlo?

Se hai un elemento di larghezza fissa e conosci la larghezza della tua immagine di sfondo, puoi semplicemente impostare la posizione dello sfondo su: la larghezza dell’elemento – la larghezza dell’immagine – il divario che vuoi sulla destra.

Ad esempio: con un elemento largo 100px e un’immagine di 300px-wide, per ottenere una distanza di 10px sulla destra, puoi impostarlo su 100-300-10 = -210px:

 #myElement { background:url(my_image.jpg) no-repeat -210px top; width:100px; } 

E ottieni gli 80 pixel più a destra dell’immagine a sinistra del tuo elemento e una distanza di 20 px a destra.

So che può sembrare stupido ma a volte risparmia il tempo … Lo uso in modo molto verticale (gap in basso) per i link di navigazione con il testo sotto l’immagine.

Non sono sicuro che si applichi al tuo caso.

il mio problema era che avevo bisogno che l’immagine di sfondo rimanga alla stessa distanza dal bordo destro quando la finestra viene ridimensionata, ad es. per tablet / mobile ecc. La mia correzione è di usare una percenatge in questo modo:

 background-position: 98% 6px; 

e si attacca al suo posto.

 background-position: calc(100% - 8px); 

sì! bene per posizionare un’immagine di sfondo come se 0px dal lato destro del browser invece di sinistra – io uso:

 background-position: 100% 0px;