Question

CSS新手在这里。我被要求为菜单实现精灵，在.png文件中，直接相邻的3 x 2网格中的六个选项。每个精灵是20px乘20px（因此整个文件是60px乘40px），但菜单按钮需要是28px乘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属性进行了事实上的填充。不幸的是，按钮本身也需要一个边框，一个只在悬停时可见。我需要以某种方式创建第二个边框吗？或者填充确实可以与图像本身分开设计？

推论问题：请问设计师为我填充原始精灵文件是标准程序吗？或者，这是一个经过深思熟虑的解决方案的常见问题吗？

Answer 1

我建议您使用CSS生成内容。然后，您可以设置生成的元素的大小，位置和背景。基本上，您可以像任何其他元素一样设置样式。所以你可以有效地“裁剪”＃39;超出你需要的精灵部分。在此示例中，我使用: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-sprite

1 个答案: