如何在 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陰影效果