创建具有不同图像和CSS的按钮

Question

我有个棘手的问题。我想创建一些按钮，看起来有点像这样。

​

​

现在您可以看到，所有按钮共享相同的背景，圆角矩形，以及一些不同的图片和文本。

那么，我应该只制作一个包含所有按钮的巨大spritemap，还是创建一个带有圆角矩形背景图片的链接，然后使用CSS将图像和文本放在里面会更好(为了性能)？

Answer 1

我建议使用compass或类似的东西来制作精灵，这样你就可以有2个分辨率的高dpi屏幕。至于圆角矩形，您只需使用CSS执行此操作，然后将背景图像定位在其中。- FIDDLE --另一方面，如果这不是一个疗养院或小孩子的网站，你可能只想使用图标字体。我不知道一个相框的一小部分与上传图片有多大关系。

HTML

<a href="#" class="box">
    <div class="sprite-icon"></div>
    <h2>Add user</h2>
</a>

CSS

.box {
    display: block; /* because it's a link and we want to put things in it | could be inline-block*/
    text-decoration: none; /* remove default */
    color: inherit; /* remove default */
    width: 8em; /* arbitrary */
    border: 1px solid #333; /* backup */
    border: 1px solid rgba(0,0,0,.2);
    text-align: center;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding: 1em;
    box-shadow: 1px 1px 5px 2px rgba(0,0,0,.1);
}

.box .sprite-icon {
    display: inline-block; /* as to center */
    width: 6em;
    height: 6em;
    background-image: url("http://placekitten.com/120/120");
}

.box h2 {
    margin: 0; /* remove default */
    padding: 0; /* remove default */
    font-size: 1em;
    font-family: arial;
    color: #2695dc;
}

Answer 2

使用css创建按钮，包括文本、渐变、边框、下拉阴影、内框阴影(白色高亮)，并使用精灵贴图将图像放在中间。尽管彼此之间的距离很远，但你需要将它们分开，但这应该会工作得很好。

一旦你创建了you地图，我强烈建议你通过ImageOptim运行它。

Answer 3

谷歌只是使用了带有许多图标的one giant image，因为这对性能更好。除非你觉得懒惰，否则把所有的东西都放在一个巨大的图像中。

实际上，你可以用CSS做边框半径和方框阴影。