-webkit-border-image с css-спрайтами

Question

Я использую -webkit-border-image, чтобы указать мое основное изображение спрайта в стиле. Изображение спрайта представляет собой набор изображений кнопок. Какие атрибуты стиля я использую для индексирования моего основного изображения спрайта?

.red {
    -webkit-border-image: url(sprite.png) 0 14 0 14;
}

Спрайт красной кнопки имеет значение x = 0, y = 21.

Какие атрибуты я использую? Если бы это был фон, я бы использовал background-position. Я не уверен, что использовать для -webkit-border-image.

Answer 1

У меня также сложилось впечатление, что спрайты были невозможны при использовании изображения границы. Но я ошиблась.

Синтаксис изображения границы выглядит следующим образом:

border-image: url([file]) [offsettop] [offsetright] [offsetbottom] [offsetleft];

border-image привязано к border-width. Можно использовать смещение, чтобы выбрать размер изображения для отображения от источника (то есть topoffset 10px + border-top-width 10px покажет 10px от 0 до 10).

Но если вместо этого вы используете border-width 0px, можно использовать смещение, чтобы скрыть часть изображения. В этом случае вы можете использовать отступы для достижения того же выравнивания, что и для border-width.

См. Этот пост (где меня поправил Скотт Мюррей, спасибо Скотту) для получения дополнительной информации и демонстрации:

http://alignedleft.com/blog/2010/07/using-css3-border-image-sprites-for-flexible-button-states/comment-page-1/#comment-832

Answer 2

Вы не можете сделать это с border-image. Согласно this , CSS3 определит новый синтаксис для срезов изображений и спрайтов изображений.