Как установить фиксированное положение фона с правой стороны в css?

В этом случае

li {background: url("../img/grey-arrow-next.png") no-repeat right center;
    border-bottom: 1px solid #D4E8EB}

Я хочу 20px пробел в правой части перед фоновым изображением, и я не могу дать margin на li, потому что border должен касаться ребер.

Поэтому мне нужно установить 20px, но он берет 20px с левой стороны, а не с правой стороны.

li {background: url("../img/grey-arrow-next.png") no-repeat 20px center;
        border-bottom: 1px solid #D4E8EB}

Ответ 1

в вашем css укажите позицию справа, затем "значение расстояния (50 пикселей)", затем другую позицию (центр/верх)

li {background: url("../img/grey-arrow-next.png") no-repeat right 50px center;
border-bottom: 1px solid #D4E8EB}

Старые браузеры и IE8 и старая версия IE не поддерживают этот код. Последние обновленные браузеры не конфликтуют с этим методом, и, надеюсь, будущие обновления также будут поддерживать его.

Если вы используете современный браузер, попробуйте background-position: calc(100% - 50px) center;, как указано в другом ответе. calc имеет долгий путь, поскольку он логически и математически способен обеспечить очень точный результат.

Ответ 2

Вы можете использовать функцию "calc" CSS3:

Пример:

background-position: calc(100% - 10px) center;

Ответ 3

Просто добавьте пробел 20px к правой стороне изображения в графическом редакторе.

Ответ 4

Вы можете использовать другой объект внутри тега li и придать ему фоновое изображение с правом поля:

li #image {
    margin-right: 20px;
    background: url(pp.jpg) no-repeat right center;
}

li {
    border: 1px solid #D4E8EB;
}

Ответ 5

используйте следующий код, чтобы добавить 20px в вправо фонового изображения -

li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-right:20px}

используйте следующий код, чтобы добавить 20px к левой фонового изображения -

li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-left:20px}

Ответ 6

К сожалению, "легкое" решение редактирует ваше изображение и добавляет 20 пикселей справа и внизу прозрачного пространства.

вы могли бы достичь этого с помощью фона-клипа/фона-источника, возможно, но это немного поиграло с...

Ответ 7

border-right: 20px solid transparent;

Ответ 8

поместите тег span внутри <li> и добавьте к нему маржу, таким образом, ваш <li> должен по-прежнему растягиваться до края вместе с вашей границей.

Ответ 9

вы можете указать процент слева,

background-position: 97% 50%;

это не является точным px по px, но будет как 3% справа