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

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>

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