Как я могу расположить фоновое изображение на абсолютном расстоянии справа от его контейнера?

Question

Я могу расположить небольшое фоновое изображение / значок в 4 пикселях от центра слева от его контейнера с помощью:

background: url(...) no-repeat 4px 50%;

Как я могу расположить его на 4 пикселя от справа ?

Answer 1

В зависимости от вашей ситуации и от того, какие браузеры вы хотите поддерживать, это работает (протестировано в IE7-8, Firefox):

background: url(...) no-repeat right 50%; border-right: 4px solid transparent;

Конечно, если вы уже ставите границу справа, это вам совсем не поможет.

Добавлено при редактировании: Если вышеприведенное не сработает, потому что вы используете границу, и вас не волнует IE7 (не уверен, что мы пока что вполне готовы) значок "ширина известен, тогда вы могли бы сделать:

.yourContainer {
  position: relative;
}

.yourContainer:after {
  content: ' '; 
  display: block; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  right: 4px; 
  width: 10px; //icon width
  z-index: -1; //makes it act sort of like a background
  background: url(...) no-repeat right 50%;
}

Answer 2

как насчет

background: url(...) no-repeat right 50%;
padding:0px;
padding-right:4px;

в случае, если вам когда-нибудь понадобится граница

Answer 3

Вы можете использовать процент:

table.dataTable thead .sorting_asc {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat 30% 50%;
}
table.dataTable thead .sorting_desc {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat 30% 50%;
}
table.dataTable thead .sorting {
  background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat 30% 50%;
}

Answer 4

CSS3 добавляет новый способ указания background-position:

background-position: right 10px top 50%;

Следует расположить фоновое изображение на 10 пикселей справа и вертикально по центру.

Answer 5

Боюсь, вы не можете, насколько я знаю.

Популярные трюки:

• Добавление прозрачного поля размером 4 пикселя к изображению и предоставление это background-position: right

• Добавление 4px margin-right к элементу (работает в некоторых ситуациях, но не в других)

• Использование jQuery для определения веса элемента и настройки положения изображения (чёрт!)