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

!! Устаревший ответ, так как 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;

Как предложил!--2-->здесь, Это довольно кросс-браузерное решение, которое отлично работает:

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, позволяющая различное происхождение для фоновой позиции, теперь поддерживается в 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;
}

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

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

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

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

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

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

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

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

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

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

background-position: 98% 6px;

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

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

background-position: 100% 0px;

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