如何在 CSS 3 中将一个图像放置在另一个图像上？

Question

我正在尝试创建如下所示的框阴影效果。阴影是使用纯 CSS3 代码开发的：

但是由于背景图像，阴影没有出现，如下图所示。

如何将阴影放在顶部？

Answer 1

如果您使用图像作为阴影，您将需要相对定位它并使用 z-indexing。 正如上面的帖子所暗示的那样，你能更具体一点吗？

Answer 2

也许这样的事情会为你做的工作

<div style="position: relative; left: 0; top: 0;">
  <img src="image1.jpg" style="position:absolute; top: 25px; left: 25px; z-index: 1;"/>
  <img src="image2.jpg" style="position:absolute; top: 80px; left: 25px; z-index: 3;"/>
</div>

希望能帮助到你。

Answer 3

如果您必须有图像作为背景。 然后，采用上述方法将是一种方法。 如果您使用的是纯色，则可以使用CSS3。

这里有一些2个很棒的教程。 希望它有用。 http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow http://www.paulund.co.uk/creating-different-css3-box阴影效果