使用多个背景的CSS Sprite表

Question

我使用的是CSS Sprite Sheet技术，并且遇到多个背景问题。

在这个网站 - https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img中，您可以看到如何从精灵表中设置背景，但我的情况有点不同。

简单代码：

＆＃13;

＆＃13;

#nav1 {
  background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat, url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
  width: auto;
  height: 40px;
  background-size: 319px 349px, auto;
}

＆＃13;

<div id="nav1"></div>

＆＃13;

＆＃13;

＆＃13;

问题是我不想显示这两个图标。我只想展示第一个：

我怎么能做到？我尝试过高度和宽度属性，但我认为它并不适用于多种背景。

Answer 1

无法分别在多个背景设置中裁剪每个图像。因此，如果您想保留黄色条，但只显示一个图标，请考虑使用伪元素或保留用于显示单个图标的实际DOM元素。例如。这里有一个<i>：

#nav1 {
  background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
  background-size: auto;
  height: 40px;
  width: auto;
}

i.icon1 {
  background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
  background-size: 319px 349px;
  display: inline-block;
  height: 40px;
  width: 40px;
}

<div id="nav1"><i class="icon1"></i></div>

如果您想确保它保留在后台，请使用z-index。如果您想确保它不会干扰#nav1的内容，请同时使用position: absolute; top: 0; left: 0。

Answer 2

您必须指定宽度。

＆＃13;

＆＃13;

#nav1 {
  background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
  width: 40px;
  height: 40px;
  background-size: 319px 349px, auto;
  position: relative;
}

#nav1:after {
  content: "";
  background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
  width: 232px;
  height: 40px;
  position: absolute;
  z-index: -1;
}

＆＃13;

<div id="nav1"></div>

＆＃13;

＆＃13;

＆＃13;