我的精灵图像没有显示？

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

试试这个片段

.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>

Answer 2

保持宽度和高度大小所需的比例。

根据您的 fiddle 我们可以从 html（window 的尺寸）开始。

您的错误：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>

对于背景位置，由于图像可以是任意大小，您可以使用 %（运行全页模式下的代码段以查看原因）。根据您的需要进行调整

我的精灵图像没有显示？

My sprite images is not showing?

css

css-sprites