Зсуньте фонове зображення праворуч за допомогою CSS

Чи є спосіб розташування фонового зображення певну кількість пікселів праворуч від його елемента?

Наприклад, щоб розташувати щось із певної кількості пікселів (скажімо, 10) зліва , ось як я це зробив:

#myElement {
    background-position: 10px 0;
}

Я вважаю цю функцію CSS3 корисною:

/* to position the element 10px from the right */
background-position: right 10px top;

Наскільки мені відомо, це не підтримується в IE8. В останніх Chrome / Firefox це чудово працює.

Див. Розділ Чи можна використовувати для отримання детальної інформації про підтримувані веб-переглядачі.

Використовуване джерело: http://tanalin.com/uk/blog/2011/09/css3-background-position/

Оновлення :

Ця функція зараз підтримується у всіх основних браузерах, включаючи мобільні браузери.

!! Відповідь застаріла, оскільки ця функція принесла CSS3

Чи є спосіб розташування фонового зображення певну кількість пікселів праворуч від його елемента?

Ні.

Популярні обхідні шляхи включають

• встановлення а margin-rightзамість елемента
• додавання прозорих пікселів до самого зображення та розміщення його top right
• або обчислення позиції за допомогою jQuery після того, як буде відома ширина елемента.

Найпростіше рішення - використовувати відсотки. Це не зовсім відповідь, яку ви шукали, оскільки ви попросили точності пікселів, але якщо вам просто потрібне щось, щоб мати трохи прокладки між правим краєм і зображенням, надання чогось 99% позиції, як правило, працює досить добре.

Код:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

Застаріла відповідь. Зараз вона реалізована в основних браузерах, дивіться інші відповіді на це питання.

CSS3 змінив специфікацію, background-positionщоб вона працювала з різною точкою початку. На жаль, я не можу знайти жодних доказів того, що він ще реалізований у будь-яких основних браузерах.

http://www.w3.org/TR/css3-background/#the-background-position Див. приклад 12.

background-position: right 3em bottom 10px;

Як запропоновано тут , це досить крос-браузерне рішення, яке чудово працює:

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

Я використовував його, оскільки функція CSS3 для визначення зрушень, запропонованих у відповіді, позначених як вирішення питання, поки не підтримується в браузерах. Напр

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

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

Простий, але брудний трюк - просто додати потрібне зміщення до зображення, яке ви використовуєте як фон. це не є ремонтом, але це робить роботу.

Це буде працювати в більшості сучасних браузерів ... крім IE (підтримка браузера) . Хоча ця сторінка перераховує> = IE9 як підтримується, мої тести з цим не погодилися.

Ви можете використовувати властивість calc () css3 так;

.class_name {
    background-position: calc(100% - 10px) 50%;
}

Для мене це найбільш чистий і логічний спосіб досягти межі праворуч. Я також використовую резервне використання border-right: 10px solid transparent;для IE.

Гаразд, якщо я розумію, що ви просите, щоб ви зробили це;

Ваш контейнер DIV викликається, #main-containerі .my-elementце всередині нього. Використовуйте це для початку роботи;

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

До речі, краще використовувати класи, якщо ви посилаєтесь на елемент нижчого рівня в межах сторінки (я припускаю, що ви, отже, міняєте своє ім'я вище.

Специфікація CSS3, що дозволяє різні походження для фонового положення, тепер підтримується у Firefox 14, але все ще не в Chrome 21 (мабуть, IE9 їх частково підтримує, але я сам не перевіряв це)

Окрім проблеми з Chrome, на яку посилається @MattyF, тут є коротший звіт: http://code.google.com/p/chromium/isissue/detail?id=95085

Якщо у вас пропорційні елементи, ви можете використовувати:

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

У цьому прикладі .validбув би клас із малюнком і .halfбув би ряд з половиною розміру від стандартного.

Брудно, але працює як шарм, і це досить керовано.

Якщо ви хочете використати це для додавання стрілок / інших значків до кнопки, наприклад, тоді ви могли б використовувати псевдоелементи css?

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

background-position: right 0;

Але якщо мені потрібно додати, наприклад, розроблену стрілку до кнопки, я, як правило, має цей html:

<a href="[url]" class="read-more">Read more</a>

І схильні робити наступні дії з CSS:

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

Використовуючи селектор: after, я додаю елемент, використовуючи CSS, просто щоб містити цю маленьку піктограму. Ви можете зробити те ж саме, додавши проліт або<i> елемент всередині a-елемента. Але я думаю, що це більш чистий спосіб додавання піктограм до кнопок, і це підтримується крос-браузер.

ви можете ознайомитись зі скрипкою тут: http://codepen.io/anon/pen/PNzYzZ

background-position: calc(100% - 8px);

використовувати правий центр як позицію, а потім додати прозору межу, щоб зрушити її?

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

Наприклад: за допомогою елемента в 100 пікселів та зображення в ширину 300 пікселів, щоб отримати розрив у 10 пікселів праворуч, ви встановите його на 100-300-10 = -210 пікселів:

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

І ви отримуєте найменше 80 пікселів свого зображення ліворуч від елемента, а проміжок 20 пікселів праворуч.

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

Не впевнений, що це стосується і вашої справи.

моя проблема полягає в тому, що мені потрібно було фонове зображення залишатися на однаковій відстані від правої межі, коли розмір вікна змінюється, тобто для планшета / мобільного тощо.

background-position: 98% 6px;

і він тримається на місці.

так! добре розташувати фонове зображення як би 0px з правого боку браузера замість лівого - я використовую:

background-position: 100% 0px;