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

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

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

那么，我应该用所有按钮制作一个巨大的spritemap吗？或者，如果我用圆形矩形的背景图片创建一个链接，然后用CSS将图像和文本放在里面，效果会更好吗？

我建议使用或类似的方法来制作sprite，这样对于高dpi屏幕，你就可以有两个分辨率。至于圆角矩形，您只需使用CSS进行此操作，然后将背景图像放置在其中另一方面，如果这不是一个养老院或小孩的网站，你可能只想使用图标字体。我不知道一个小小的画框和上传一张图片有多大关系

HTML

---

创建按钮，包括文本、渐变、边框、下落阴影、内框阴影（白色高亮）和CSS，并使用Shite地图将图像放置在中间。您需要将每个文件间隔得相当远，但它应该工作得很好

一旦你创建了恶意地图，我强烈建议你运行它。

谷歌只使用很多图标，因为这样对性能更好。 把所有的东西都放在一个巨大的图像中，除非你感到懒惰

---

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

是我一个人做的，还是所有这些图像都很糟糕？就像谷歌地图上的谷歌标志一样-可以让任何网站看起来都有14年的历史。@sheriffderek你的浏览器放大率是100%吗？大多数图片在我看来都很不错。我的浏览器是“实际大小”。也许这只是个人品味的问题。@sheriffderek也许：）我仍然不知道你不喜欢谷歌地图的什么标志。请看下面的第三个图：确认它会提高性能一点，还是没有真正的区别？我选择从不使用sprites，但是现在发生的情况是，您正在为每个单独的图像发出一个http请求，而不是一个http请求。-所以，是的，它是“更快的”。你应该制作两个版本，在开发工具中进行测试，并观察会发生什么。我打赌这没什么大区别。。。但是如果你是amazon.com或者别的什么。。。每毫秒都很重要。

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

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