Мои спрайты не отображаются?

Question

Это мой код, просто, я хочу центрировать слайдер. Но изображения не отображаются, и я очень уверен, что местоположение [ссылка на изображение] является правильным. Итак, что не так с моим кодом? Помоги мне?

body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
.slider { 
    width: 50%; 
    height: 30%; 
    margin: 0 auto; 
} 
.slider#img1 { 
    background: url('../images/all-images-sprite.png') no-repeat 0 -1368px; 
    background-size: cover; 
    width: 300px; 
    height: auto; 
} 
.slider#img2 { 
    background: url('../images/all-images-sprite.png') no-repeat 0 -1740px; 
    background-size: cover; 
    width: 300px; 
    height: auto; 
} 
.slider#img3 { 
    background: url('../images/all-images-sprite.png') no-repeat 0 -1568px; 
    width: 300px; 
    height: auto; 
} 
.slider#img4 { 
    background: url('../images/all-images-sprite.png') no-repeat 0 -967px; 
    width: 300px; 
    height: auto; 
} 

это мой jsfiddle

Answer 1

сохранить требуемое соотношение ширины размера и высоты.

от вашей скрипки мы можем начать с html (размер окна).

Ваши ошибки: width:50%, а затем 300px. а затем height:auto который null когда контейнер пустой. также селектор для использования является .slider #id где #id является ребенок

поэтому пример :) https://jsfiddle.net/rdjajvuh/3/

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.slider { 
 
    width: 50%; 
 
    height: 33vw; 
 
    margin: 0 auto; 
 
    border: solid; 
 
} 
 
/* demo test purpose*/ 
 
.slider>div {/* see me */ 
 
    box-shadow:0 0 0 1px ; 
 
    } 
 
.slider #img1 { 
 
    background: url('https://s32.postimg.org/ge685yjyt/all_images_sprite.png') no-repeat 0 0; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.slider #img2 { 
 
    background: url('https://s32.postimg.org/ge685yjyt/all_images_sprite.png') no-repeat 0 12%;/* % because size is 50%x33vw ... */ 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.slider #img3 { 
 
    background: url('https://s32.postimg.org/ge685yjyt/all_images_sprite.png') no-repeat 0 23%; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.slider #img4 { 
 
    background: url('https://s32.postimg.org/ge685yjyt/all_images_sprite.png') no-repeat 0 33.65%; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="slider"> 
 
    <div id="img1"></div> 
 
    <div id="img2"></div> 
 
    <div id="img3"></div> 
 
    <div id="img4"></div> 
 
</div> 
 

 
<a href="#">Previous</a> 
 
<a href="#">Next</a>

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

Answer 2

Попробуйте этот фрагмент

.sprite { 
 
    display: block; 
 
} 
 
.imgs { 
 
    width: 120px; 
 
    height: 76px; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
#img1 { 
 
    background-position: -5px -5px; 
 
    background-image: url(https://s32.postimg.org/ge685yjyt/all_images_sprite.png); 
 
} 
 
#img2 { 
 
    background-position: -5px -84px; 
 
    background-image: url(https://s32.postimg.org/ge685yjyt/all_images_sprite.png); 
 
} 
 
#img3 { 
 
    background-position: -5px -165px; 
 
    background-image: url(https://s32.postimg.org/ge685yjyt/all_images_sprite.png); 
 
} 
 
#img4 { 
 
    background-position: -5px -245px; 
 
    background-image: url(https://s32.postimg.org/ge685yjyt/all_images_sprite.png); 
 
}

<div class="sprite"> 
 
    <div id="img1" class="imgs"></div> 
 
    <div id="img2" class="imgs"></div> 
 
    <div id="img3" class="imgs"></div> 
 
    <div id="img4" class="imgs"></div> 
 
</div>