html - 找不到 CSS Sprite 图像

Question

HTML，图像只是空白，就像找不到图像一样。它仍然会调整大小。为什么是这样？我尝试在 website 的图像文件夹中使用 imgur 和本地镜像问题还是没有解决。

.sprite {
  background-image: url(https://i.imgur.com/q0b68yh.png);
  background-repeat: no-repeat;
  display: block;
}

.sprite-fast_img {
  width: 85px;
  height: 88px;
  background-position: -5px -5px;
}

.sprite-github {
  width: 30px;
  height: 30px;
  background-position: -100px -5px;
}

.sprite-gmail {
  width: 30px;
  height: 30px;
  background-position: -100px -45px;
}

.sprite-linkedin {
  width: 30px;
  height: 30px;
  background-position: -100px -85px;
}

.sprite-secure_img {
  width: 85px;
  height: 88px;
  background-position: -140px -5px;
}

.sprite-stackoverflow {
  width: 30px;
  height: 30px;
  background-position: -5px -103px;
}

.sprite-tumblr {
  width: 30px;
  height: 30px;
  background-position: -45px -103px;
}

.sprite-twitter {
  width: 30px;
  height: 30px;
  background-position: -140px -103px;
}

<div class="sprite-secure_img"></div>

感谢您的帮助和最良好的祝愿。

Answer 1

我认为您的 div 缺少 sprite 类:

.sprite {
    background-image: url(https://i.imgur.com/q0b68yh.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-fast_img {
    width: 85px;
    height: 88px;
    background-position: -5px -5px;
}

.sprite-github {
    width: 30px;
    height: 30px;
    background-position: -100px -5px;
}

.sprite-gmail {
    width: 30px;
    height: 30px;
    background-position: -100px -45px;
}

.sprite-linkedin {
    width: 30px;
    height: 30px;
    background-position: -100px -85px;
}

.sprite-secure_img {
    width: 85px;
    height: 88px;
    background-position: -140px -5px;
}

.sprite-stackoverflow {
    width: 30px;
    height: 30px;
    background-position: -5px -103px;
}

.sprite-tumblr {
    width: 30px;
    height: 30px;
    background-position: -45px -103px;
}

.sprite-twitter {
    width: 30px;
    height: 30px;
    background-position: -140px -103px;
}

<div class="sprite sprite-secure_img"></div>