使用未填充精灵的 png 文件中的填充实现 css-精灵

Question

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

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

这是一次尝试（使用SCSS）：

$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
  }
}

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

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

推论：请设计师帮我pad原始精灵文件是标准流程吗？或者这是一个常见的问题，有一个很好的解决方案？

Answer 1

我建议您使用 CSS 生成的内容。然后，您可以设置生成的元素的大小、位置和背景。基本上，您可以像对待任何其他元素一样设置它的样式。所以你可以有效地 'crop' 出你需要的精灵部分。在这个例子中，我使用 :before

$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;
    }
}

http://codepen.io/goshdarnheck/pen/MwjZyR

我在 :before 元素上添加了轮廓，以明确它是什么以及它在哪里。

使用未填充精灵的 png 文件中的填充实现 css-精灵

Implementing a css-sprite with padding from a png file of unpadded sprites

css

css-sprites