Сместить фоновое изображение справа с помощью CSS

Есть ли способ расположить фоновое изображение на определенное количество пикселей справа от его элемента?

Например, чтобы расположить что-то определенное количество пикселей (скажем, 10) слева , я бы так и сделал:

#myElement {
    background-position: 10px 0;
}

Я нашел эту функцию CSS3 полезной:

/* to position the element 10px from the right */
background-position: right 10px top;

Насколько я знаю, это не поддерживается в IE8. В последнем Chrome / Firefox все работает отлично.

См. Могу ли я использовать для получения подробной информации о поддерживаемых браузерах.

Использованный источник: http://tanalin.com/en/blog/2011/09/css3-background-position/

Обновление :

Эта функция теперь поддерживается во всех основных браузерах, включая мобильные браузеры.

!! Устаревший ответ, так как CSS3 принес эту функцию

Есть ли способ расположить фоновое изображение на определенное количество пикселей справа от его элемента?

Нет.

Популярные обходные пути включают

• установив margin-rightвместо этого элемент
• добавление прозрачных пикселей к самому изображению и позиционирование его top right
• или вычисление позиции с использованием jQuery после того, как ширина элемента станет известна.

Самое простое решение - использовать проценты. Это не совсем тот ответ, который вы искали, поскольку вы просили о точности пикселей, но если вам просто нужно что-то сделать, чтобы между правым краем и изображением было небольшое отступление, то положение в 99% обычно работает достаточно хорошо.

Код:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

Устаревший ответ: теперь он реализован в основных браузерах, см. Другие ответы на этот вопрос.

CSS3 изменил спецификацию, background-positionтак что он будет работать с другой точкой происхождения. К сожалению, я не могу найти никаких доказательств того, что это реализовано еще ни в одном из основных браузеров.

http://www.w3.org/TR/css3-background/#the-background-position См. пример 12.

background-position: right 3em bottom 10px;

Как предлагается здесь , это довольно кросс-браузерное решение, которое отлично работает:

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

Я использовал его, так как функция CSS3 задания смещений, предложенная в ответе, помеченная как решение вопроса, пока не поддерживается в браузерах. Например

Наиболее подходящий ответ является новым синтаксисом четыре-значения фона позиции, но пока все браузеры не поддерживают его ваш лучший подход представляет собой сочетание предыдущих ответов в следующем порядке:

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

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

Это будет работать в большинстве современных браузеров ... кроме IE (поддержка браузеров) . Несмотря на то, что на этой странице перечислены> = IE9 как поддерживаемые, мои тесты не согласились с этим.

Вы можете использовать свойство calc () css3 следующим образом;

.class_name {
    background-position: calc(100% - 10px) 50%;
}

Для меня это самый чистый и самый логичный способ добиться разницы справа. Я также использую запасной вариант использования border-right: 10px solid transparent;для IE.

Хорошо, если я понимаю, о чем ты спрашиваешь, ты это сделаешь;

Вы называете свой контейнер DIV, #main-containerи .my-elementэто внутри него. Используйте это, чтобы начать;

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

Между прочим, лучше использовать классы, если вы ссылаетесь на элемент более низкого уровня на странице (я полагаю, что вы меняете свое имя выше).

Спецификация CSS3, допускающая различное происхождение для background-position, теперь поддерживается в Firefox 14, но все еще не в Chrome 21 (очевидно, IE9 частично поддерживает их, но я не проверял это сам)

В дополнение к проблеме Chrome, на которую ссылается @MattyF, здесь есть более краткое резюме: http://code.google.com/p/chromium/issues/detail?id=95085.

Если у вас есть пропорциональные элементы, вы можете использовать:

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

В этом примере, .validбудет класс с изображением и .halfбудет строка с половиной размера стандартного.

Грязный, но работает как шарм, и это разумно управляемым.

Если вы хотите использовать это, например, для добавления стрелок / других значков к кнопке, тогда вы можете использовать псевдо-элементы css?

Если это действительно фоновое изображение для всей кнопки, я стараюсь включить интервал в изображение, и просто использую

background-position: right 0;

Но если мне нужно добавить, например, разработанную стрелку к кнопке, я получаю следующий HTML:

<a href="[url]" class="read-more">Read more</a>

И, как правило, делать следующее с помощью CSS:

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

Используя селектор: after, я добавляю элемент, используя CSS, чтобы содержать этот маленький значок. Вы можете сделать то же самое, просто добавив span или <i>element внутри a-element. Но я думаю, что это более чистый способ добавления значков к кнопкам, и он поддерживается в разных браузерах.

Вы можете проверить скрипку здесь: http://codepen.io/anon/pen/PNzYzZ

background-position: calc(100% - 8px);

использовать центр вправо в качестве позиции, а затем добавить прозрачную границу, чтобы сместить его?

Если у вас есть элемент фиксированной ширины и вы знаете ширину фонового изображения, вы можете просто установить background-position: ширина элемента - ширина изображения - требуемый промежуток справа.

Например: для элемента шириной 100px и изображения шириной 300px, чтобы получить разрыв в 10px справа, вы устанавливаете его в 100-300-10 = -210px:

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

И вы получите самые правые 80 пикселей вашего изображения слева от вашего элемента, и промежуток 20 пикселей справа.

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

Не уверен, что это относится к вашему делу, хотя.

моя проблема заключалась в том, что мне нужно, чтобы фоновое изображение оставалось на том же расстоянии от правой границы при изменении размера окна, т.е. для планшета / мобильного телефона и т. д. Мое исправление заключается в использовании процента в следующем формате:

background-position: 98% 6px;

и он застревает на месте.

да! хорошо, чтобы расположить фоновое изображение, как будто 0px с правой стороны браузера, а не слева - я использую:

background-position: 100% 0px;