Si necesita colocar un background-image en CSS 20px desde la izquierda y 10px desde arriba, eso es fácil. Tu puedes hacer background-position: 20px 10px;. Pero, ¿y si quisieras colocarlo a 20 px de la derecha y 10 px de la parte inferior?
Supongamos también que no conocemos el ancho y el alto exactos del elemento, lo cual es probable debido a los diseños fluidos y el contenido dinámico. Si lo hiciéramos, podríamos hacer un poco de cálculo matemático y usar el background-position sintaxis.
Una petición perfectamente razonable, como dicen. Aquí hay algunas formas de hacerlo.
La sintaxis de cuatro valores para background-position
Esta es la manera más fácil. Combina valores de longitud con cualquiera de las palabras clave superior / derecha / inferior / izquierda (no en el centro). Entonces, para nuestro ejemplo:
background-position: right 20px bottom 10px;Con esto, puede compensar un background-image desde cualquiera de las cuatro esquinas de un elemento.
Compatibilidad con el navegador, según MDN: Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari / iOS 7+. El mayor peligro es Android.
Probé Android 4.0, 4.1 y 4.2 y no funcionó. Pero Android 4.4 lo admitió.
Usando calc ()
Puede seguir utilizando la sintaxis de dos valores de background-position, pero hágalo usando longitudes creadas a través de calc(). Me gusta:
background-position: calc(100% - 20px) calc(100% - 10px); La compatibilidad del navegador es un poco mejor, con Chrome de nuevo a 19+, Firefox de nuevo a 4+ y Safari de nuevo a 6+ (todos con prefijo).
El navegador de valores de Android tenía el mismo soporte que la sintaxis de cuatro valores anterior.
Usando JavaScript
Si necesita una compatibilidad perfecta con el navegador, me imagino que la única forma es JavaScript. Mida la altura / ancho del elemento, conozca el tamaño del background-image, luego ajuste el CSS según sea necesario.
Usando jQuery:
var el = $(".example"),
bgWidth = 20,
bgHeight = 20;
el.css({
"background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) + "px"
});Manifestación
Aquí están las tres formas: