Установите размер для позиции изображения спрайта в фоновом режиме

Question

Я размещаю маленькое изображение в углу фона div. Я хочу включить его в спрайт, но я не уверен, как установить размер изображения из спрайта. Единственное решение, которое я могу придумать, это поместить изображение в абсолютно правый нижний угол спрайта, чтобы увеличить размер. Лучшее решение. Вот CSS на данный момент:

background: url(images/fod-sprite.png) 99% 99% no-repeat #000;
background-position: -4px -154px;

Answer 1

Используйте псевдокласс :before:

.test:before {
  content: "";
  float: left;
  width: 16px; /* requires width */
  height: 16px; /* require height */
  margin: 0 5px 0 0; /* specify margin */
  background: #000 url(images/fod-sprite.png) -4px -154px no-repeat;
}

Answer 2

Поместите img в абсолютно установленный промежуток, прикрепите его к нижнему правому углу, затем используйте свойство clip, чтобы установить размер из спрайта.

Вот скрипка: http://jsfiddle.net/bengundersen/BSswy/

Редактировать: Вы можете сделать это без интервала, если на родительском div установлено переполнение.

Еще одно преимущество использования обрезанного изображения - это то, что вы все равно можете печатать.