Поместить фоновое изображение 1em справа?

Question

Насколько я могу судить, невозможно разместить фоновое изображение CSS 1em от правой границы любого блока, равно как и невозможно разместить изображение 1em снизу.

Следующий код размещает фоновое изображение 1em слева и 2em сверху.

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

Есть ли способ в CSS указать, что фоновое изображение должно быть "так далеко от правого края", если размер поля является динамическим и предполагается, что вы не можете изменить HTML?

(проценты не будут работать, поскольку поле может изменить размер)

Если это невозможно, какое минимальное количество изменений нужно внести в HTML?

Это обходной путь, к которому я пришел:

<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

Спецификация *1001* для фона позволяет вам изменить точку привязки с левого верхнего угла на любую, какую вы захотите. Например, следующее установит нижний нижний угол изображения 1em справа и 2px снизу:

background-position: right 1em bottom 2px;

Подтверждено для работы в:

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

По состоянию на апрель 2013 года, только IE6-8 и некоторые периферийные браузеры не поддерживают.

Вот тестовая страница: http://jsbin.com/osojuz/1/edit

Answer 2

Элементы с положением: абсолютное; можно расположить по их правому краю. Итак, если вы не возражаете против незначительных изменений в html, сделайте следующее:

<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;
}

Конечно, вы также можете использовать абсолютное позиционирование второго div с повторяющимся фоном. Но тогда вам придется установить размер (внутреннего) div в CSS.

Answer 3

Вы можете попробовать что-то вроде этого:

<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.stackoverflow.com/Content/Img/stackoverflow-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>

Редактировать: С нетерпением жду CSS 3 background-position.

Answer 4

После некоторых исследований фактическая длина пикселя в x позиции фона составляет всегда , считая с левой стороны элемента. Единственный способ сделать эту работу (без использования других элементов) состоит в том, чтобы использовать javascript, вычислить длину слева, учитывая ширину элементов:

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

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