Как получить perticluar изображение из большого набора изображений в одном изображении с помощью CSS

Question

Как получить изображение perticluar из больших наборов изображений в одном изображении, используя css

например. Иконки Jquery UI, имеющие одно большое изображение, но с использованием класса CSS, получают только значок изображения Perticlar.

Answer 1

Во-первых, вы создаете подходящий видовой экран div:

<div class="ui-icon alert-icon"></div>

Затем вы определяете CSS:

.ui-icon { width:16px; height:16px; overflow:hidden; background:url(images/icons.png); }
.alert-icon { background-position:0 0; }
.warrning-icon { background-position:0 -16px; }

Примечание - наш класс ui-icon применяет значения по умолчанию для каждого значка. Классы alert-icon и warrning-icon являются примером пользовательских значков. Они просто перемещают фоновое изображение, показывая правильный фрагмент изображения icons.png.

В зависимости от расположения значков на основном спрайтовом изображении вам придется перемещать изображение на большее / меньшее количество пикселей или в другом направлении (+/-).

Answer 2

Сделайте ваш div со стандартным размером, а затем примените так:

<style>#jd {
display:block;
overflow:hidden;
background-image:url(1.png);
background-repeat:no-repeat;
height:100px;
width:100px;}.j1 { background-position: 0px 0px;}.j2 {background-position: 0px -99px;}</style><div id="jd" class="j1"></div><hr><div id="jd"  class="j2"></div>

Answer 3

Вы можете назначить им один и тот же класс, или вы можете получить их по имени тега .. получить массив изображений .. class it retrieves only perticular image icon что вы имеете в виду под идентификатором, разрешен только один идентификатор для каждого документа, но вы можете использовать классна нескольких элементах, следовательно, извлекая их с помощью селектора классов.

EDIT

например, значки пользовательского интерфейса Jquery, имеющие одно большое изображение, но с использованием класса CSS, получают только Perticlarзначок изображения.

Что вы, вероятно, имели в виду, что вы используете спрайты изображений? Таким образом, вы хотите получить только часть этого большого изображения (например, jquery ui), что вам нужно сделать, это вынужно background position.Спрайты изображений Google Я уверен, что вы найдете много ресурсов, вот как я обошел это