html - texto - Coloque la imagen de fondo 1em desde la derecha?

mostrar imagen en html

Question

Por lo que puedo decir, no es posible colocar una imagen de fondo CSS 1em desde el borde derecho de ningún bloque, tampoco es posible colocar una imagen 1em desde la parte inferior.

El siguiente código coloca la imagen de fondo 1em desde la izquierda y 2em desde la parte superior.

<div class="foo" style="background: url(''bar.png'') no-repeat 1em 2em">
  Some text here
</div>

¿Hay alguna manera en CSS para especificar que la imagen de fondo debe estar "tan lejos del borde derecho" si el tamaño del cuadro es dinámico y suponiendo que no se puede cambiar el HTML?

(Los porcentajes no funcionarán, ya que la caja puede cambiar de tamaño)

Si esto no es posible, ¿cuál es la cantidad más pequeña de cambio que necesita realizar en el HTML?

Esta es la solución alternativa que se me ocurrió:

<style>
div.background
{
  float: right; 
  background: url(''bar.png'') no-repeat top left; 
  margin-right: 1em; 
  width: 16px; 
  height: 16px;
}
</style>
<div class="foo">
  <div class="background" style="">&nbsp;</div>
  Some text here
</div>

Answer 1

Después de algunas investigaciones, la longitud real de píxeles x de la posición de fondo siempre se cuenta desde el lado izquierdo del elemento. La única forma de hacer que esto funcione (sin usar otros elementos) sería usar javascript, calcular la longitud izquierda dado el ancho de los elementos:

var rightMargin = "10"; // in pixels
var imageWidth = "16";
var left = element.style.clientWidth - imageWidth - rightMargin;

element.style.backgroundPosition = "0px " + left + "px";

Answer 2

Elementos con posición: absoluta; puede ser posicionado por su borde derecho. Entonces, si no te importa un pequeño cambio en el html, haz esto:

<div id="the-box">
    <img id="the-box-bg" src="bar.png" />
    Text text text text....
</div>
(...)
#the-box {
    position: relative;
}
#the-box-bg {
    position: absolute;
    right: 1em;
    z-index: -1;
}

Por supuesto, también puedes usar el posicionamiento absoluto de un segundo div, con un fondo repetitivo. Pero luego tendría que establecer el tamaño del div (interno) en CSS.

Answer 3

Podrías probar algo como esto:

<style type="text/css" media="screen">
    #outer {
        position: relative;
        top: -1em;
        left: -1em;
        margin: 1em 0 0 1em;
        outline: thin solid #F00;
        background: url(http://i..com/Content/Img/-logo-250.png) no-repeat 100% 100%;
    }
    #inner {
        outline: thin solid #0F0;
        position: relative;
        top: 1em;
        left: 1em;
    }
</style>

<div id="outer">
    <div id="inner">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

Editar: Esperando background-position CSS 3 .

Answer 4

La especificación de posición de fondo CSS3 le permite cambiar el punto de anclaje de la parte superior izquierda a cualquier cosa que desee. Por ejemplo, lo siguiente establecerá la esquina inferior inferior de la imagen 1em desde la derecha y 2px desde la parte inferior:

background-position: right 1em bottom 2px;

Confirmado para trabajar en:

IE9 / 10, Firefox 13+, Chrome 26+, Opera 11+, Seamonkey 2.14+, Lunascape 6.8.0

A partir de abril de 2013, solo IE6-8 y algunos navegadores adicionales carecen de soporte.

Aquí hay una página de prueba: http://jsbin.com/osojuz/1/edit