CSS: Difficoltà con offset degli angoli diversi di posizione sfondo

Question

Sto riscontrando alcuni problemi nella creazione di pulsanti utilizzando più sfondi. So che posso usare: prima e dopo, ma mi piacerebbe capirlo, se possibile.

Ecco la Jsfiddle http://jsfiddle.net/syren/qerUT/1/

In questo, ho mostrato quello che in ultima analisi, voglio farlo sembrare come. In quello, ho usato

background-position: left top, 97% 90%; 

Giusto per dimostrare quello che voglio assomigliare. Dal momento che voglio che sia in grado di espandersi con grazia da utilizzare per altri pulsanti e per la traduzione, voglio usare questo:

background-position: left top, right 5px bottom 5px; 

Ma questo non sta funzionando. Secondo le specifiche dovrebbe, quindi non sono sicuro di quello che sto facendo male. Qualche idea? Grazie!

Answer 1

Ho provato a fare esattamente la stessa cosa. Sfortunatamente, non esiste un vero supporto per right 5px bottom 5px in questo momento.

Quello che ho finito per fare è stato prendere la mia immagine e effettivamente aggiungere pixel trasparenti sul lato destro e inferiore dell'immagine per portarla nella posizione che volevo. Non è bello ma funziona perfettamente con qualsiasi browser che supporti più immagini di sfondo.

Per un elenco completo delle funzionalità di sfondo supportate da ciascun browser, visitare il numero Standardista CSS3 Background Properties page. In posizione background, elenca gli offset a 4 valori come supportati solo da IE9 + e Opera 11+. È un vero peccato perché questa è l'unica caratteristica di sfondo CSS3 che non è supportata su tutta la linea.