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

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

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

Во всех современных браузерах и IE вплоть до версии 9 вы можете использовать синтаксис из четырех значений, указанный в CSS3:

background-position: right 10px top 10px;

Источник: MDN

Ответ 3

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

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

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

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

Ответ 4

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

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

и измените свое изображение, чтобы включить границу 10px сверху и справа в прозрачном цвете

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

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

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