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

Question

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

background-position-x: right 100px;

Answer 4

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

background-position:95% 50%;

Answer 5

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

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

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

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

Лучше для всех фонов: url ('../ images / bg-menu-dropdown-top.png') оставлено 20 пикселей вверх без повтора! Важный;

Answer 9

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

background-position: right 10px top 10px;

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

Answer 10

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

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