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

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

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

background-position: right 30px center;

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

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

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

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

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

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

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

Насколько я знаю, спецификация 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 в содержащий элемент.

Попробуй это:

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

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

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

background-position: right 20px bottom 20px;

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

Источник: MDN

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

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

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

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

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

.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/

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

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

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

Я пытался выполнить аналогичную задачу, чтобы стрелка раскрывающегося списка всегда находилась справа от заголовка таблицы, и придумал, что, похоже, работает в 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

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

background-position-x: right 100px;

Другое решение, о котором я не упоминал, - это использование псевдоэлементов, и я уверен, что это решение будет работать с любым браузером, совместимым с 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 пикселей от правой границы, нам нужно прикрепить псевдоэлемент на 5 пикселей от правой границы элемента справа: -5px; ... Проверьте это сами: http://jsfiddle.net/yHucT/

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

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

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

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

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

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

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

Изменение процентов слева немного хрупко на мой вкус. Когда мне нужно что-то подобное, я обычно добавляю свой стиль контейнера к элементу-обертке, а затем применяю фон к внутреннему элементу с помощью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Класс не является обязательным и позволит вашему содержанию есть в обивку при необходимости (отрицательные значения маржи должны соответствовать соответствующим значениям в обертке кожухах). Это немного многословно, но работает надежно, не заботясь об относительном положении изображения по сравнению с его шириной и высотой.

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

background-position:95% 50%;

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

<div style='overflow:hidden;'>

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

    </div>

</div>

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

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

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

background-position: right 10px top 10px;

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

Лучше для всего фона: url ('../ images / bg-menu-dropdown-top.png') оставлено 20px top no-repeat! Важный;