Поместить фоновое изображение CSS на x пикселей справа?

Question

Я думаю, что ответ - нет, но вы можете расположить фоновое изображение с помощью CSS, чтобы оно было фиксированным количеством пикселей от правого?

Если я установил background-position значения x иу, кажется, они дают только фиксированные корректировки пикселей слева и сверху соответственно.

Answer 1

background-position: right 30px center;

Работает в большинстве браузеров.См .: http://caniuse.com/#feat=css-background-offsets для полного списка.

Дополнительная информация: http://www.w3.org/TR/css3-background/#the-background-position

Answer 2

Можно использовать атрибут border как длину справа

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

Answer 3

Существует один способ, но он не поддерживается во всех браузерах (см. покрытие здесь )

element {
  background-position : calc(100% - 10px) 0;
}

Он работает в каждом современном браузере, , но вполне возможно, что IE9 дает сбой . Также нет покрытия для =

Answer 4

Насколько я знаю, спецификация CSS , конечно, не обеспечивает именно то, что вы просите, кроме выражений CSS. Исходя из предположения, что вы не хотите использовать выражения или Javascript, я вижу три хакерских решения:

• Убедитесь, что фоновое изображение соответствует размеру контейнера (по крайней мере, по ширине) и установите background-repeat: repeat или repeat-x, если выравнивается только ширина. Затем, чтобы что-то появилось x пикселей справа, просто, как background-position: -5px 0px.
• Использование процентов для background-position демонстрирует особое поведение, которое лучше видно, чем описано здесь. Дать ему шанс. По сути, background-position: 90% 50% сделает правый край фонового изображения на расстоянии 10% от правого края контейнера.
• Создать div, содержащий изображение. Явно установите положение содержащего элемента position: relative, если он еще не установлен. Установите контейнер изображения на position: absolute; right: 10px; top: 10px;, очевидно, корректируя последние два по своему усмотрению. Поместите контейнер div с изображением в содержащий элемент.

Answer 5

Попробуйте:

#myelement {
  background-position: 100% 50%;
  margin-right: 5px;
}

Обратите внимание, что приведенный выше код переместит весь элемент (не только фоновое изображение) на 5 пикселей вправо.Это может быть хорошо для вашего случая.

Answer 6

Вы можете сделать это в CSS3:

background-position: right 20px bottom 20px;

Работает в Firefox, Chrome, IE9 +

Источник: MDN

Answer 7

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

Обходной путь для того же изображения - создать изображение в формате PNG или GIF (форматы файлов изображений, поддерживающие прозрачность), у которого прозрачная часть справа от изображения точно равна числу пикселей, которым вы хотите дать право. поле (например: 5px, 10px и т. д.)

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

Недостатки: К сожалению, вы не можете использовать JPG, если фоновая часть контейнера и цвет фона фонового изображения CSS не имеют одинаковый плоский цвет (без градиента / виньетки), в основном белый / черный и т. Д. *

Answer 8

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

.container:after{
    content:"";
    position:absolute;
    right:20px;
    background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}

этот css поместит фон справа внизуугол элемента ".container" с пробелом 20 пикселей справа.

См. эту скрипку, например, http://jsfiddle.net/h6K9z/226/

Answer 9

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

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

Answer 10

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

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

Поработав в инспекторе, я пришел к этому кросс-браузерному решению, которое работает в IE8 +, Chrome, Firefox и Safari, а также в адаптивных проектах.

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

Вот кодекс того, как это выглядит и работает.Codepen написан с использованием SCSS - http://cdpn.io/xqGbk