Как установить background-position на абсолютное расстояние, начиная справа?

Question

Я хочу установить фоновое изображение для div, таким образом, чтобы оно находилось в верхнем RIGHT div, но с фиксированным 10px расстоянием от верхнего и правого.

Вот как бы я это сделал, если бы хотел в верхнем ВЛЕВО div:

background: url(images/img06.gif) no-repeat 10px 10px;

Можно ли в любом случае достичь того же результата, но с отображением фона сверху ВПРАВО ?

Answer 1

В Firefox, IE9 и Opera 10.5 вы можете использовать синтаксис из четырех значений, указанный в CSS3 :

background-position: right 10px top 10px;

Источник: MDN

Answer 2

Используйте ранее упомянутое правило вместе с верхним и правым полем:

background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;

Фоновые изображения появляются только в пределах отступа, а не на полях. Если добавление поля не является вариантом, возможно, вам придется прибегнуть к другому элементу div, хотя я бы рекомендовал использовать его только в качестве крайней меры, чтобы сделать разметку как можно более постной и семантической.

Answer 3

Есть несколько способов сделать это.

1. Сделайте математику самостоятельно, если это возможно. Вы уже знаете размеры вашего изображения. Если вы знаете размеры div, вы можете просто поместить изображение в (div div - ширина изображения - 10, div div - высота изображения - 10).

2. Используйте Javascript, чтобы сделать тяжелую работу за вас. Практически тот же метод, что и выше, за исключением того, что вам не нужно знать размеры самого div. Javascript может рассказать вам.

3. Более хакерский способ - поместить прозрачную рамку размером 10px вокруг верхней и правой части изображения и установить позицию на top right.

Answer 4

Я не знаю, возможно ли это в чистом CSS, поэтому вы можете попробовать

background: url(images/img06.gif) no-repeat top right;

и измените изображение, добавив к нему рамку размером 10 пикселей сверху и справа в прозрачный цвет

Answer 5

Вы можете использовать проценты:

background: url(...) top 98% no-repeat;

Если вы знаете ширину родительского div, определить, какой процент вам нужно использовать, будет довольно легко.

Answer 6

Вы можете подделать пространство с правой стороны с границей в пикселях (большую часть времени белым или, может быть, что-то еще)

  background-image: url(../images/calender.svg) center right
  border-right: 5px white solid

Answer 7

Правильный формат:

background: url(YourUrl) 0px -50px no-repeat;

Где 0px - горизонтальное положение, а -50px - вертикальное положение.

CSS background-position принимает отрицательные значения.

Answer 8

Одним из решений является абсолютное позиционирование пустого div и предоставление ему фона. Я не верю, что есть способ сделать это исключительно с помощью CSS, без изменений в изображении и без дополнительной разметки в плавном макете.