CSS - несколько изображений в одном и использование CSS для определения фона

Question

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

Несколько изображений

Я хочу знать, как это работает, CSS да, но как именно все это работает при использовании фона с использованием этого изображения, а затем все это обрезается в точности так, как и должно быть - когда определяется как фон это изображение.

Мне было бы интересно узнать, как это сделать - так что я могу поднять свой уровень CSS немного больше: P

Спасибо

Answer 1

То, что вы ищете, это CSS Sprites , есть куча учебных пособий и способов достижения этого. По сути, вы делаете объявление фона и используете background-position, чтобы решить, что в фоновом режиме отображается.

Между прочим, CSS-спрайты великолепны, они отлично подходят для их выяснения.

Answer 2

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

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;
}