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

Question

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

我现在需要的是第四个图标（attachment-icon）作为按钮图标。

这是我的：

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的片段，大家可以根据自己的需要进行调整。如果您有任何疑问，请告诉我。

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

Background image viewport by many-images-in-one-image-file

html

css

performance

image-clipping