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

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

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

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

ОТВЕТЫ

Ответ 1

Я нашел эту функцию 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/

Ответ 2

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

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

Неа.

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

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

Ответ 3

Самое простое решение - использовать проценты. Это не совсем тот ответ, который вы искали, так как вы попросили пиксельную точность, но если вам просто нужно что-то, чтобы иметь небольшое дополнение между правым краем и изображением, давая что-то 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;
}

Ответ 4

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

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

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

background-position: right 3em bottom 10px;

Ответ 5

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

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

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

Ответ 6

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

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+ */

Ответ 7

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

Ответ 8

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

Вы можете использовать свойство calc() css3 так:

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

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

Ответ 9

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

У вас есть контейнер 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;
}

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

Ответ 10

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

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

Ответ 11

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

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

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

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

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

Ответ 12

Если вы хотите использовать это для добавления стрелок/других значков к кнопке, например, вы могли бы использовать псевдо-элементы 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> внутри a-элемента. Но я думаю, что это более чистый способ добавления значков в кнопки и поддержка кросс-браузера.

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

Ответ 13

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

Ответ 14

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

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

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

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

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

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

Ответ 15

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

background-position: 98% 6px;

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

Ответ 16

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

background-position: 100% 0px;