transicion - Desplazar una imagen de fondo desde la derecha usando CSS

mostrar texto hover css

Question

¿Hay una manera de colocar una imagen de fondo un cierto número de píxeles desde la derecha de su elemento?

Por ejemplo, para colocar algo a un cierto número de píxeles (por ejemplo, 10) desde la izquierda , así es como lo haría:

#myElement {
    background-position: 10px 0;
}

Answer 1

Respuesta obsoleta: ahora está implementado en los principales navegadores, vea las otras respuestas a esta pregunta.

CSS3 ha modificado la especificación de background-position de background-position para que funcione con diferentes puntos de origen. Desafortunadamente, no puedo encontrar ninguna evidencia de que esté implementado todavía en los principales navegadores.

http://www.w3.org/TR/css3-background/#the-background-position Ver ejemplo 12.

background-position: right 3em bottom 10px;

Answer 2

!! Respuesta obsoleta, ya que CSS3 trajo esta característica

¿Hay una manera de colocar una imagen de fondo un cierto número de píxeles desde la derecha de su elemento?

No

Soluciones populares incluyen

• establecer un margin-right en el elemento en lugar
• agregando píxeles transparentes a la imagen y posicionándola en la top right
• o calculando la posición usando jQuery después de que se conoce el ancho del elemento.

Answer 3

¡sí! bien para colocar una imagen de fondo como si 0px desde el lado derecho del navegador en lugar de la izquierda - yo uso:

background-position: 100% 0px;

Answer 4

¿Usar el centro a la derecha como la posición y luego agregar un borde transparente para compensarlo?

Answer 5

Como se propone here , esta es una solución de navegador cruzado que funciona perfectamente:

background: url(''/img.png'') no-repeat right center;
border-right: 10px solid transparent;

Lo utilicé ya que la función CSS3 de especificar las compensaciones propuestas en la respuesta marcada como la solución de la pregunta todavía no es compatible con los navegadores. P.ej

Answer 6

Esto funcionará en la mayoría de los navegadores modernos ... aparte de IE (soporte de navegador) . A pesar de que la página enumera> = IE9 como compatible, mis pruebas no estuvieron de acuerdo con eso.

Puedes usar la propiedad calc () css3 como tal;

.class_name {
    background-position: calc(100% - 10px) 50%;
}

Para mí, esta es la forma más limpia y lógica de lograr un margen a la derecha. También utilizo una alternativa de usar border-right: 10px solid transparent; para IE.

Answer 7

He encontrado esta característica CSS3 útil:

/* to position the element 10px from the right */
background-position: right 10px top;

Por lo que sé, esto no es compatible con IE8. En el último Chrome / Firefox funciona bien.

Consulte ¿Puedo usar para obtener detalles sobre los navegadores compatibles?

Fuente utilizada: http://tanalin.com/en/blog/2011/09/css3-background-position/

Answer 8

La especificación CSS3 que permite diferentes orígenes para la posición de fondo ahora es compatible con Firefox 14, pero aún no está en Chrome 21 (aparentemente IE9 los admite en parte, pero no lo he probado yo mismo)

Además del problema de Chrome al que se hace referencia @MattyF, hay un resumen más breve aquí: http://code.google.com/p/chromium/issues/detail?id=95085

Answer 9

La respuesta más adecuada es la nueva sintaxis de cuatro valores para la posición de fondo, pero hasta que todos los navegadores lo admitan, su mejor enfoque es una combinación de respuestas anteriores en el siguiente orden:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

Answer 10

La solución más fácil es usar porcentajes. Esta no es exactamente la respuesta que buscaba, ya que pidió una precisión de píxeles, pero si solo necesita algo para tener un pequeño relleno entre el borde derecho y la imagen, dar a algo una posición del 99% por lo general funciona bien.

Código:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

Answer 11

Ok, si entiendo lo que estás pidiendo, harías esto;

Usted tiene su contenedor DIV llamado #main-container y .my-element que está dentro de él. Use esto para comenzar;

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

Por cierto, es mejor usar clases si hace referencia a un elemento de nivel inferior dentro de una página (supongo que, por lo tanto, usted es mi cambio de nombre arriba).

Answer 12

Si quisiera usar esto para agregar flechas / otros íconos a un botón, por ejemplo, ¿podría usar los pseudo-elementos css?

Si es realmente una imagen de fondo para todo el botón, tiendo a incorporar el espacio en la imagen, y solo uso

background-position: right 0;

Pero si tengo que agregar, por ejemplo, una flecha diseñada a un botón, tiendo a tener este html:

<a href="[url]" class="read-more">Read more</a>

Y tienden a hacer lo siguiente con CSS:

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '''';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url(''../images/btn-white-arrow-right.png'');
    position: absolute;
    right: 12px;
    top: 10px;
}

Al usar el: después del selector, agrego un elemento usando CSS solo para contener este pequeño icono. Podría hacer lo mismo simplemente agregando un elemento span o <i> dentro del elemento a. Pero creo que esta es una forma más limpia de agregar íconos a los botones y es compatible con múltiples navegadores.

Puede consultar el violín aquí: http://codepen.io/anon/pen/PNzYzZ

Answer 13

Si tiene un elemento de ancho fijo y conoce el ancho de su imagen de fondo, simplemente puede establecer la posición de fondo en: el ancho del elemento - el ancho de la imagen - el espacio que desea a la derecha.

Por ejemplo: con un elemento de 100 píxeles de ancho y una imagen de 300 píxeles de ancho, para obtener un espacio de 10 píxeles a la derecha, configúrelo en 100-300-10 = -210 píxeles:

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

Y obtienes los 80 píxeles más a la derecha de tu imagen a la izquierda de tu elemento, y un espacio de 20px a la derecha.

Sé que puede sonar estúpido, pero a veces ahorra tiempo ... Lo uso de manera vertical (espacio en la parte inferior) para los enlaces de navegación con el texto debajo de la imagen.

Aunque no estoy seguro de que se aplique a tu caso.

Answer 14

Si tienes elementos proporcionados, podrías usar:

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

En este ejemplo, .valid sería la clase con la imagen y .half sería una fila con la mitad del tamaño de la estándar.

Sucio, pero funciona como un encanto y es razonablemente manejable.

Answer 15

Un truco simple pero sucio es simplemente agregar el desplazamiento que desea a la imagen que está utilizando como fondo. No es mantenible, pero hace el trabajo.

Answer 16

mi problema era que necesitaba que la imagen de fondo se mantuviera a la misma distancia del borde derecho cuando se cambia el tamaño de la ventana, es decir, para tableta / móvil, etc. Mi solución es utilizar un porcentaje como así:

background-position: 98% 6px;

y se pega en su lugar.

Answer 17

background-position: calc(100% - 8px);