-webkit-border-image avec les sprites css

Question

J'utilise -webkit-border-image pour spécifier mon image sprite principale dans un style. L'image de sprite est un groupe d'images de bouton. Quels attributs de style dois-je utiliser pour indexer dans mon image-objet principale?

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

Le sprite du bouton rouge est à x = 0, y = 21.

Quels attributs utiliser-je? Si c'était un fond j'utiliserais background-position. Je ne suis pas sûr de savoir quoi utiliser pour -webkit-border-image.

Answer 1

Vous ne pouvez pas faire cela avec border-image. Selon this, CSS3 définira une nouvelle syntaxe pour les tranches d'image et les images-objets d'image.

Answer 2

J'avais également l'impression que les sprites n'étaient pas possibles en utilisant l'image de bordure. Mais j'ai eu tort.

La syntaxe d'image frontière est la suivante:

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

border-image est liée à la largeur de la bordure. Il est possible d'utiliser le décalage pour choisir la quantité de l'image à afficher à partir de l'origine (c'est-à-dire topoffset de 10px + border-top-width de 10px montrera 10px du pixel 0 au pixel 10).

Si vous utilisez à la place une bordure de , il est possible d'utiliser le décalage pour masquer une partie de l'image. Dans ce cas, vous pouvez utiliser le remplissage pour obtenir le même alignement qu'avec la largeur de bordure.

Voir ce post (où je corrigeais par Scott Murray, merci Scott) pour plus d'informations et démonstration:

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