Розташувати фонове зображення 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% від правого краю контейнера.
• Створіть роздільник, що містить зображення. Явно задайте положення містить елемент, 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+ */

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

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

Якщо ви хочете вказати лише вісь 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;
}

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

Якщо контейнер має фіксовану висоту: виберіть відсотки (розташування фону), поки він не підходить правильно.

Якщо контейнер має динамічну висоту: якщо ви хочете прокладки між вашим фоном і контейнером (наприклад, коли вибрані вкладки для стилізації, додайте), додайте накладку до зображення та встановіть положення фону праворуч або внизу.

Я наткнувся на це питання, коли я намагався отримати фон для поля вибору, щоб сказати 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-повторити! Важливо;