Вопросы Теги

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

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

Повторные изображения

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

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

Спасибо

6
задан MacMac 11 March 2010 в 10:23
поделиться

3 ответа

{
    height: foo;
    width: foo;
    overflow: hidden;
    background: colour url() no-repeat 0 pixels-to-top-of-image;
}
3
ответ дан 16 December 2019 в 21:38
поделиться

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

CSS-спрайты, кстати, великолепны, они неплохо справляются с попытками разобраться в них.

4
ответ дан 16 December 2019 в 21:38
поделиться 
<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;
}
1
ответ дан 16 December 2019 в 21:38
поделиться
Другие вопросы по тегам:

Похожие вопросы: