html - 多图像合一图像文件的背景图像视口

Question

为了减少网页的加载时间，我将所有图标放入一个大图像文件中。

我现在需要的是第四个图标（附件图标）作为按钮图标。

这就是我所拥有的：

button.attach {
  background: lightgray url(https://i.stack.imgur.com/ZT5KK.png);
  background-position-x: -116px;
  padding-left:30px;
  height:45px;
  
}

<button class="attach"> Attach file</button>

不幸的是，第五个图标（垃圾）和第六个图标（错误）隐藏在文本后面。如何将图像仅剪切到此图标？

Answer 1

button.attach span {
    background: lightgray url(https://i.stack.imgur.com/ZT5KK.png) -111px 38px;
    padding-left: 1px;
    display: block;
    float: left;
    width: 35px;
    height: 35px;
}
    button.attach {
    width: 130px;
    height: 44px;
}

    <button class="attach"><span></span> Attach file</button>

在这里我在片段中附加了css，您可以根据您的要求进行调整。如果您有任何疑问，请告诉我。