CSS - várias imagens em uma e usando CSS para determinar um fundo

Question

Se você não sabe o que quero dizer, confira esta imagem:

Imagens múltiplas

Quero saber como funciona, CSS sim, mas exatamente como tudo funciona ao usar um plano de fundo usando essa imagem e, em seguida, tudo é cortado exatamente o que deve fazer - quando determinado como um plano de fundo para esta imagem.

Seria interessante para mim saber como - para que eu possa levar meu CSS de nível um pouco mais: P

Obrigado

Answer 1

{
    height: foo;
    width: foo;
    overflow: hidden;
    background: colour url() no-repeat 0 pixels-to-top-of-image;
}

Answer 2

O que você está procurando é Sprites CSS, existem montes de tutoriais e maneiras de conseguir isso. Basicamente o que você está fazendo é declarar um fundo e usar background-position Para decidir o que é exibido no fundo.

A propósito, o CSS Sprites é ótimo, bom trabalho para tentar descobrir.

Answer 3

<div id="buttonOne">Button 1</div>
<div id="buttonTwo">Button 2</div>

#buttonOne, #buttonTwo
{
    background-image: url(/images/ALL-BUTTONS-IN-ONE-IMAGE-TILED-16PX-APART.png);
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    overflow: hidden;
}

#buttonOne
{
    background-position: 0 0;
}

#buttonTwo
{
    background-position: 0 -16px;
}