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

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

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

Ответы

Ответ 1

background-position: right 30px center;

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 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 изображения в содержащийся элемент.

Ответ 5

Попробуйте следующее:

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

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

Ответ 6

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

background-position: right 20px bottom 20px;

Он работает в Firefox, Chrome, IE9 +

Источник: MDN

Ответ 7

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

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

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

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

Ответ 8

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

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

этот css помещает фон в правый нижний угол элемента .container с пространством 20px с правой стороны.

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

Ответ 9

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

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

Ответ 10

Просто поместите пиксельное дополнение в изображение - добавьте 10px или что-то другое к размеру холста изображения в фотошопе и выровняйте его прямо в CSS.

Ответ 11

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

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

Ответ 12

Другим решением, о котором я не упоминал, является использование псевдоэлементов, и я полагаю, что это решение будет работать с любым браузером, совместимым с CSS 2.1 (≥ IE8, ≥ Safari 2,...), и он также должен быть отзывчивым:

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

Пример: Элемент, например. квадратный размер 100px (без учета границ) имеет отступы 10px, а фоновое изображение должно отображаться внутри правого заполнения. Это означает, что псевдоэлемент представляет собой квадрат размером 80 пикселей. Мы хотим привязать его к правой границе элемента с правом: -10px;. Если мы хотим иметь фоновое изображение на расстоянии 5 пикселей от правой границы, нам нужно придерживать псевдоэлемент 5px от правой границы элемента с правом: -5px;... Проверьте это для себя: http://jsfiddle.net/yHucT/

Ответ 13

Если контейнер имеет фиксированную высоту: Tweek проценты (background-position), пока они не будут правильно установлены.

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

Я наткнулся на этот вопрос, пока я пытался получить фон для окна выбора, чтобы он соответствовал 5 пикселям справа от моего выбора. В моем случае мой фон - это стрелка вниз, которая заменит основной значок выпадающего списка. В моем случае отступы всегда будут оставаться одинаковыми (5-10 пикселей справа) для фона, так что это легкая модификация, чтобы довести до фактического фонового изображения (делая его размеры на 5-10 пикселей шире с правой стороны.

Надеюсь, это поможет!

Ответ 14

Вы можете поместить фоновое изображение в редакторе на x пикселей с правой стороны.

background: url(images_url) no-repeat right top;

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

Ответ 15

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

<style>
    .wrapper {
        background-color: #333;
        border: solid 3px #222;
        padding: 20px;
    }
    .bg-img {
        background-image: url(path/to/img.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .content-breakout {
        margin: -20px
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

Класс .content-breakout не является обязательным и позволит вашему контенту поесть в дополнение, если это необходимо (значения отрицательных полей должны соответствовать соответствующим значениям в дополнении обертки). Он немного подробный, но работает надежно, не заботясь об относительном позиционировании изображения по сравнению с его шириной и высотой.

Ответ 16

С тех пор, как этот вопрос был задан, он столкнулся с проблемой, но я просто столкнулся с этой проблемой, и я понял:

background-position:95% 50%;

Ответ 17

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

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

Ответ 18

Это работает в Chrome 27, я не знаю, действительно ли это или нет, или что с ним делают другие. Я был удивлен этим.

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

Ответ 19

Работает для всех реальных браузеров (и для IE9 +):

background-position: right 10px top 10px;

Я использую его для тем RTL WordPress. Пример: временный веб-сайт или настоящий веб-сайт будет скоро. Посмотрите на иконки на больших углах DIV.

Ответ 20

Лучше всего background: url ('../images/bg-menu-dropdown-top.png') left 20px top no-repeat! important;

Ответ 21

Если вы хотите указать только ось X, вы можете сделать следующее:

background-position-x: right 100px;