如何从一堆图像（图像包）中提取一个图像？

Question

我看过许多网站显示图片包中的一张图片。我们怎么能这样做。

例如：http://www.flipkart.com/prod/images/new-vd-sprite-b2a14956.png

我想从这张图片中提取十字标志。

我粗略地认为它无法完成，我们必须使用CSS。 有没有人对此有更好的了解。

Answer 1

此技术称为 CSS精灵。

HTML

<span class="sprite contact"></span>
<span class="sprite store"></span>

CSS

span.sprite {
    height: 30px;
    width: 25px;
    display: inline-block;
    background-color: burlywood;
    background-image: url('http://www.flipkart.com/prod/images/new-vd-sprite-b2a14956.png');
    background-repeat: no-repeat;
}
span.contact {
    background-position: 0 0;
}
span.store {
    background-position: 0 -80px;
}

更多资源：

• http://css-tricks.com/css-sprites/

• https://en.wikipedia.org/wiki/Sprite_%28computer_graphics%29#Sprites_by_CSS