CSS: Dificultad con la posición de fondo diferentes desviaciones de esquina

Question

Tengo algunos problemas para crear botones con varios fondos. Sé que puedo usar: antes y después, pero me gustaría resolver esto si es posible.

Aquí es el jsFiddle http://jsfiddle.net/syren/qerUT/1/

En eso, he mostrado lo que en última instancia, quiero que se vea como. En ese caso, utilicé

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

Solo para mostrar cómo quiero que se vea. Como yo quiero que sea capaz de expandirse con gracia a utilizar para otros botones y para la traducción, quiero usar esto:

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

Pero esto no está funcionando. De acuerdo con la especificación que debería, entonces no estoy seguro de lo que estoy haciendo mal. ¿Algunas ideas? ¡Gracias!

Answer 1

He intentado hacer exactamente lo mismo. Desafortunadamente, no hay soporte real para right 5px bottom 5px en este momento.

Lo que terminé haciendo fue tomar mi imagen y agregar píxeles transparentes a la derecha e inferior de la imagen para colocarla en la posición que quería. No es bonito, pero funciona perfectamente en cualquier navegador que admita varias imágenes de fondo.

Para obtener una lista completa de las características de fondo admitidas por cada navegador, visite tno Standardista CSS3 Background Properties page. En background-position, enumera el desplazamiento de 4 valores ya que solo es compatible con IE9 + y Opera 11+. Es una verdadera lástima, ya que esta es la característica de fondo de CSS3 que no es compatible en todos los ámbitos.