¿puede una imagen de fondo colocarse negativamente hacia abajo o hacia la derecha, o solo se puede repetir una parte de una imagen?

Question

Estoy armando un sprite y tengo dos preguntas.

Algo que siempre me he preguntado si es posible posicionar negativamente una imagen de fondo a la derecha o abajo. Una posición negativa es pan y mantequilla a la izquierda de un elemento o parte superior, pero ¿qué pasa con la derecha y la parte inferior?

Si tengo un div 500px por 500px ¿puedo posicionar el borde izquierdo de una imagen de fondo para que aparezca 5px desde la derecha con un valor negativo superior a 495px para empujarlo?

La segunda pregunta es si puedo usar solo una pequeña porción de una imagen y repetirla sin mostrar el resto de la imagen.

Por ejemplo, puedo tener un sprite de 300 píxeles cuadrados y lleno de todo tipo de cosas. ¿Es posible tomar una porción cuadrada de 50 píxeles de esa imagen y repetirla en el fondo de un elemento?

¡Dudo mucho que sea posible, pero que el mono debe dormir!

Answer 1

Para su primera pregunta, no, no puede.

Para su segunda pregunta, no, no puede.

Answer 2

La propiedad background-position tiene unos valores diferentes:

left top 
left center 
left bottom 
right top 
right center 
right bottom 
center top 
center center 
center bottom 

También puede especificar posiciones X e Y para ello. Para obtener más información sobre el mismo, echar un vistazo a este enlace:

https://developer.mozilla.org/docs/CSS/background-position

En cuanto a su segunda pregunta, eso no es posible el uso de CSS simple.

Answer 3

Si utiliza posiciones de fondo basadas en porcentaje, puede hacerlo. Así que usted quiere algo como:

background-position: 190% 0; 

Answer 4

Ya han responden que no se puede usar valores negativos, pero tal vez usted podría intentar:

dar al elemento background-position:right bottom y la imagen para el fondo debe tener solo la parte que quieres mostrar

Answer 5

Para "posicionar negativamente una imagen de fondo a la derecha o abajo", puede usar porcentajes menores que 0%. p. ej .:

background-position: -11% -7%; 

... coloca la imagen recortada en la esquina inferior derecha si la imagen es del mismo tamaño que el elemento. Es posible que necesite porcentajes más negativos si no son del mismo tamaño.

Para "posicionar negativamente una imagen de fondo en izquierda o superior", puede usar porcentajes mayores que 100%. ej .:

background-position: 105% 110%; 

... posiciona la imagen recortada en la parte superior ya la izquierda de nuevo asumiendo que son de tamaños similares. Es posible que necesite porcentajes más grandes si no son del mismo tamaño.

Encontrar los porcentajes exactos que necesita no es muy intuitiva, sin embargo. CSS utiliza porcentajes un poco diferente con background-position. El valor es el porcentaje a lo largo de la imagen y el elemento (también conocido como viewport) donde son iguales. Esta es la razón por la cual 0% es igual a left, 50% es igual a center, y 100% es igual a right. Fuera de este rango es incluso menos intuitivo ya que "menor que cero" coincide con un punto anterior al borde superior/izquierdo tanto en la imagen como en el elemento (desplazando efectivamente la imagen desde arriba/izquierda), y "mayor que 100% "coincide con un punto mayor que el borde inferior/derecho que tiene el efecto de mover la imagen desde la parte inferior/derecha.

Esta ecuación ayuda a determinar dónde quieres que se siente la imagen. El álgebra simple obtendrá la variable que desea conocer (por ejemplo, resolver por porcentaje).

effectiveLeft = (elementWidth - imageWidth) * percentageLeft; 
effectiveTop = (elementHeight - imageHeight) * percentageTop; 

En cuanto a su segunda pregunta (la repetición de parte de una imagen), no creo que esto es posible a menos que se va a repetir múltiples elementos de corte, que es diferente a lo que estaba deseando.

Answer 6

Para negativa posición inferior derecho funcione bien, este DIV debe ser necesariamente la propiedad background-repeat: no-repeat;