Я только что попробовал это в Tryit-редакторе, который вы связали, он не работает в Chrome. Даже при использовании Javascript.
лько я могу судить, невозможно разместить фоновое изображение 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=""> </div>
Some text here
</div>