Как назначить background-position как что-то вроде 'margin-right: 10px'?

Question

Я пытаюсь поместить изображение в качестве фона и хотел бы, чтобы оно выровнялось по правому краю, но не близко к. Что-то вроде margin-right: 10px. Возможно ли это сделать в чистом CSS, без явного добавления поля к изображению?

У меня было несколько попыток, но все не удалось ... http://jsfiddle.net/cA7Un/1/

Заранее спасибо!

Answer 1

Вы можете использовать процент, но это хорошо, только если вы знаете, что ширина контейнера не изменится:

background-position: 95% center;

В противном случае вы можете добавить 10 пикселей пробела справа от вашего изображения в редакторе изображений, таком как Photoshop.

Answer 2

Чтобы использовать пример, который вы положили на jsfiddle:

Я объявил следующий дополнительный стиль:

.rss
    {
        background-image: url('http://tipabsorb.com/index/wp-content/plugins/category-specific-rss-feed-menu/rss_small_icon.png');
        background-repeat: no-repeat;
        float: right;
        width: 16px;
        min-width: 16px;
        max-width: 16px;
        height: 16px;
        min-height: 16px;
        max-height: 16px;
        margin: 10px;
    }

Это использует то же изображение, но добавляет дополнительный div к вашей разметке. Этот метод дает вам изображение в качестве фонового изображения, а затем с полем вы можете расположить его так далеко, с какой бы стороны вы не хотели (также изменив поплавок, если вы хотите, чтобы он был слева).

<div class='test' style='width: 300px; height: 100%'>
    <div class="rss">
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

Положение div "rss" перед вашей нормальной разметкой важно, так как это влияет на поток. Можно также сделать это, поместив div абсолютно с относительным родителем.

Наконец, я удалил фон из класса ".test", так как теперь он перемещен в класс "rss".

Надеюсь, это поможет.