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

Насколько я могу судить, невозможно разместить фоновое изображение 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>

Ответ 1

CSS3 background-position spec позволяет вам изменить опорную точку в левом верхнем углу на все, что вы хотите. Например, ниже будет установлен нижний нижний угол изображения 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

Ответ 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.

Ответ 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.

Ответ 4

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

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

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