Html 如何制作图像背景浮雕效果

我真的不知道如何命名我的问题，但我有一个psd文件，看起来像这样：

上图中的每一个项目都是一个单独的图像，如下所示：

我没有一个很好的规范，这就是我所知道的。所以我一直在想也许我可以用整个图像作为精灵的背景

请分享你的想法如何实现这样的事情，如果你熟悉，请编辑问题名称，因为我不能

---

谢谢

这是一篇很棒的文章，它使用

文本阴影

实现了这一点：

下面是它的外观示例：

代码：

---

我没有包括正确的字体，但你明白了。

这就是你要做的。。。我只是在Photoshop中做的，结果非常好。它可以在CSS中复制

<img src="http://i.stack.imgur.com/o1z9H.png" id="front"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="middle"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="back"/>

CSS现在有了过滤器。（尚未完全支持）

您可以使用放置阴影

• 长方体阴影即使是透明的，SVG也保留了矩形阴影
• 与文本阴影类似，但适用于矢量图像（.svg）

---

旁注：由于尚未完全支持，请使用图像编辑软件。

问题是什么？如何实现这种效果[我不知道如何命名]这是一种浮雕效果。没有Photoshop就不容易实现。虽然你可以通过使用3个不同颜色的图像并将它们偏移2个像素左右来伪造它。你可能想从嵌入浮雕效果创建一个图像精灵。@hungerstar是的，我在考虑，但我认为有一些CSS过滤器可以达到这个效果。谢谢你们，谢谢你们的建议，但不要认为这对我有帮助，因为在我的情况下，我有图像，而不是文本。无论如何，谢谢，很好的例子如果你决定在将来使用纯css解决方案，我想这会很方便，并且更具性能和伸缩性。是的，你是对的。这就是为什么我首先要问这个问题，因为我不想在这个问题上使用精灵为什么要使用多个图像而不是一个？只是因为它们是不同的颜色。为了CSS，这只是一个视觉效果的问题。如果是我，我无论如何都会用PhotoShop来做，然后就完蛋了。

<img src="http://i.stack.imgur.com/o1z9H.png" id="front"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="middle"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="back"/>

#front {
    top:5px;
    left:5px
}
#middle {
    top:3px;
    left:5px
}
#bottom {
    top:7px;
    left:5px
}