使用不同的图像和CSS创建按钮

Question

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

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

因此，如果我使用圆角矩形的背景图片创建链接，然后使用CSS将图像和文本放在里面，那么我应该用所有按钮制作一个巨大的spritemap还是更好（性能）？

Answer 1

我建议使用compass或类似的东西来制作精灵，这样你就可以为高dpi屏幕提供2种分辨率。对于圆角矩形，您只需使用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创建按钮，包括文本，渐变，边框，投影，内框阴影（白色高光），并使用精灵图将图像放在中间。你需要将每个恶意距离相互隔开，但它应该运作良好。

一旦您创建了恶意地图，我强烈建议您通过ImageOptim运行它。

Answer 3

Google只使用带有许多图标的one giant image，因为这样做会更好。 除非你感到懒惰，否则将一切都整合在一个巨大的图像中。

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