css - attribute - style html

¿Cómo establecer la posición de fondo fijo desde el lado derecho en css?

Question

Esta pregunta ya tiene una respuesta aquí:

• Compensar una imagen de fondo desde la derecha usando CSS 17 respuestas

En este caso

li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB}

Quiero un espacio de 20px en el lado derecho antes de la imagen de fondo y no puedo dar margen en li porque el border debe tocar los bordes.

Así que necesito configurar 20px pero toma 20px del lado izquierdo y no del lado derecho.

li {background: url("../img/grey-arrow-next.png") no-repeat 20px center;
border-bottom: 1px solid #D4E8EB}

Answer 1

Puede usar otro objeto dentro de la etiqueta li y asignarle su imagen de fondo con un margen derecho:

li #image {
margin-right: 20px;
background: url(pp.jpg) no-repeat right center;
}
li {
border: 1px solid #D4E8EB;
}

Answer 2

Puedes usar la función "calc" de CSS3:

ejemplo:

background-position: calc(100% - 10px) center;

Answer 3

Solo agregue 20 píxeles de espacio en blanco al lado derecho de la imagen en un editor gráfico.

Answer 4

coloque una etiqueta de separación dentro del <li> y agregue el margen a eso, de esa manera su <li> aún debería extenderse hasta el borde junto con el borde.

Answer 5

desafortunadamente, la solución "fácil" es editar su imagen y agregar 20px a la derecha y abajo del espacio transparente.

probablemente podrías lograrlo con background-clip / background-origin pero eso tomaría un poco de juego con ...

Answer 6

en su posición de mención de css, a continuación, "valor de espaciado (50px)" y luego otra posición (centro / superior)

li {background: url("../img/grey-arrow-next.png") no-repeat right 50px center;
border-bottom: 1px solid #D4E8EB}

El navegador anterior e IE8 y la versión antigua de IE no admiten este código. Los navegadores actualizados más recientes no tienen conflictos con este método y es de esperar que las actualizaciones futuras también lo admitan.

Si está utilizando un navegador moderno, intente background-position: calc(100% - 50px) center; como se sugiere en otra respuesta también. calc tiene mucho camino por recorrer, ya que es lógica y matemáticamente capaz de producir resultados muy precisos.

Answer 7

puede especificar el porcentaje de la izquierda,

background-position: 97% 50%;

Esto no es exacto px por px pero será como 3% desde la derecha

Answer 8

use el siguiente código para agregar 20px a la derecha de la imagen de fondo -

li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-right:20px}

use el siguiente código para agregar 20px a la izquierda de la imagen de fondo -

li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-left:20px}

Answer 9

border-right: 20px solid transparent;