Gmail中按钮背景图片的精灵如何工作？

Question

注意到Gmail用于UI中按钮背景的精灵是这样的：

我们都知道这些是实际的按钮：

直到现在（甚至现在），我的想法是，紧密排列的矩形精灵中的相邻图标将显示在任何背景图像中。但是，任何Gmail按钮中只显示一个图标 它只是CSS吗？是JavaScript吗？是魔法吗？

Answer 1

它是CSS，还有一些叫做嵌套DIV 的“额外卡路里”。实际图标是位于按钮中心的单独DIV，几乎不足以容纳一个图标。

Answer 2

的 CSS。

他们在background几层内设置了height，width和<div>。

如果您使用Chrome并右键单击任何这些UI按钮并单击Inspect Element，您可以看到嵌套的<div>是如何工作的。由于Google部署代码的方式，HTML和CSS有点混淆，但它应该相当容易理解。