小CSS图像未正确显示

我在使用CSS显示小图像时遇到问题。我试图显示一个图标大小的图片（图片有几个像素的边框，所以它不是边对边的），但是图像本身在显示时没有居中，并且部分被周围框的右侧和底部阴影隐藏。我喜欢阴影的外观，但我认为图像太小了，在调整大小时不能忽略盒子的阴影。这是我的CSS。有什么想法吗

.delete_button {
    background: url('trash_can.png');
    background-repeat: no-repeat;
    width: 20px;
    height: 24px;
    display: inline;
}

---

尝试此操作，调整背景位置值，直到图像正确定位：

.delete_button {
    background: url('trash_can.png');
    background-repeat: no-repeat;
    width: 20px;
    height: 24px;
    display: inline;
    background-position     : -3px -4px;
}

再进一步扩展一下，您可能希望尝试将所有小图像以矩阵样式添加到一个图标图像中。然后，您可以使用宽度、高度和背景位置选择所需的图像。这将允许您的所有图标作为单个文件一次加载，从而减少互联网流量。当需要“新”图标时，它将被缓存并立即可用

background-image: url("icons.png");
background-position: 30px 40px; /* Use these values to select your small image contained in your large image */
background-repeat   : repeat;
width           : 20px;     /* or however large your icon is */
height          : 24px;     /* or however large your icon is */

---

垃圾箱图像的尺寸是多少？整体图像为20px 24px。这包括图像周围的边框，因此图像本身不会一直延伸到边缘。下面的答案非常有用。我只是需要调整一下数字。背景位置的数字很有用。谢谢我喜欢将所有图标放在一个文件中的想法。我以后得试试。