Как сместить изображение при использовании фонового положения css

Question

Чтобы создать полосу прокрутки на моей странице, у меня был следующий CSS. Это дало мне идеальный результат и выровняло изображение в центре полосы прокрутки.

background: #3395d2 url('img/thumb.png') no-repeat center; 
border-radius: 8px; 
border: 1px solid #004c98; 

Однако я взял фон и создал спрайт, используя другие мелкие изображения на своей странице. Затем, чтобы снова нарисовать изображение на полосе прокрутки, я использовал следующий CSS. Однако на этот раз он не был выровнен по центру.

background: #3395d2 url('img/small-images.png') no-repeat center; 
border-radius: 8px; 
border: 1px solid #004c98; 
background-position: 0 -702px; 

Как я могу изменить свой код так, что изображение все еще выравнивает в середине скроллинга, несмотря на то, в спрайт?

JSFiddle

Answer 1

первую очередь, center, даже не важно, как только вы переопределить background-position.

background: #3395D2 url('http://s21.postimg.org/3ymz2gr8n/small_images.png') no-repeat center; 

такая же, как говорят:

background-color: #3395D2; 
background-image: url('http://s21.postimg.org/3ymz2gr8n/small_images.png'); 
background-repeat: no-repeat; 
background-position: center; 

так, когда вы говорите

background-position: 0 -702px; 

после произнесения

background-position: center; 

переопределении его.

упомянутый, у вас есть другой вопрос. просто потому, что это спрайт, не означает, что CSS обрабатывает каждое изображение в ваш спрайт как отдельное изображение. если вы выровняете его по вертикали, вы увидите другие изображения в своем спрайте. я бы предложил сделать вместо спрайта вместо спрайта вместо спрайта, а затем отрегулировать background-position-x (0 в вашем текущем коде), чтобы выбрать изображение, которое вы хотите в своем спрайте, и background-position-y (-702px в вашем текущем коде), чтобы центрировать его по вертикали на прокрутке бар.