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

Question

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

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

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

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创建按钮，包括文字、渐变、边框、阴影、内框阴影（白色高光），中间用sprite map放置图片。您需要将每个恶意空间彼此相距相当远，但它应该可以正常工作。

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

Answer 3

Google 只使用带有许多图标的one giant image，因为这样可以提高性能。 除非您感到懒惰，否则将所有内容合并到一张巨大的图像中。

实际上，您可以使用 CSS 设置边框半径和框阴影。