从未添加的精灵的png文件实现带有填充的css精灵

这里是CSS新手。我被要求为一个菜单实现一个精灵，在一个3 x 2的网格中有六个选项，它们在.png文件中直接相邻。每个精灵是20px乘20px（因此整个文件是60px乘40px），但菜单按钮需要是28px乘28px，即填充4px

如果按原样实现此填充，则相邻的精灵图像将显示在填充中。因此，我使用的是边框，它允许我指定菜单项后面的实际背景颜色，从而隐藏其他精灵

以下是一个尝试（使用SCS）：

（我在这里使用的图像只是为了说明）

因为我不知道如何指定填充的背景色，所以我使用border属性创建了一个事实上的填充。不幸的是，按钮本身也需要有一个边框，只有在悬停时才可见。我是否需要以某种方式创建第二个边界？或者，填充确实可以与图像本身分开设计吗

---

推论问题：要求设计师为我填充原始sprite文件是标准程序吗？或者这是一个普遍存在的问题吗？

我建议您在CSS中使用生成的内容。然后可以设置生成元素的大小、位置和背景。基本上，您可以将其设置为与任何其他元素类似的样式。因此，您可以有效地“裁剪”出您需要的雪碧部分。在这个例子中，我使用

---

我在

：before

元素上添加了一个提纲，以明确它是什么以及它在哪里。

下面是她在代码笔中的全部内容：回答你的第二个问题：我通常看到开发人员根据自己的需要制作SpriteSheet，作为页面加载的优化。但是很多人正在转向图标字体，因为它们更易于管理和扩展以适应不同的用途/设备。绝对！我们计划在下一次迭代中使用图标字体。

$background-color: #fff;
/* The background in question is actually a darker grey,
but I'm using white for simplicity's sake. The real background color
will be detected. */

.nav-home {
  background-image: url('http://3.bp.blogspot.com/-z7fLYYhBwYk/VK08xu5q00I/AAAAAAAAIAg/_AR083a5biY/s1600/Screen%2BShot%2B2015-01-07%2Bat%2B15.03.31.png');
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: -40px -40px; //variable
  padding: 0px;
  border: 4px solid $background-color; // my de-facto padding
  border-radius: 3px; // a radius that belongs to the actual border 
  &:hover{
    // ** padding? **
    border: 1px solid #e6e6e6;
    //border-radius: 3px; //this is how my border needs to look if I could specify a padding color
  }
}

$background-color: #fff;

.nav-home {
    width: 28px;
    height: 28px;
    padding: 0px;
    position: relative;
    border-radius: 3px; // a radius that belongs to the actual border
    border: 2px solid #0cf;

    &:before {
        background-image: url('http://3.bp.blogspot.com/-z7fLYYhBwYk/VK08xu5q00I/AAAAAAAAIAg/_AR083a5biY/s1600/Screen%2BShot%2B2015-01-07%2Bat%2B15.03.31.png');
        width: 20px;
        height: 20px;
        outline: 1px dotted #f0f;
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-position: -38px -38px; //variable
        position: absolute;
        top: 4px;
        left: 4px;
    }
}