如何疊加兩個透明背景圖像

Question

我需要覆蓋兩個不同div的幾個背景圖像，我使用的是透明PNG，但是當我一個覆蓋另一個div時，第二個會在第一個上添加一些令人討厭的白色背景，並且效果會丟失。 我在某處讀到這可能是由於alpha通道引起的，但沒有有關演練的任何信息。 有人可以指出我的解決方案嗎？

請注意，我正在使用一個精靈並從那里獲取兩個圖像，jQuery也包括在內（因此我將接受JS或jQuery解決方案），我需要使用透明圖像，不能使用不透明圖像，不能合並圖像。 我目前正在使用z-index: 1; 對於底層和z-index:2; 對於頂部，可能會有第三個，因此解決方案不應以覆蓋兩個圖像為中心，而是覆蓋2個以上圖像。

謝謝！

我正在使用的圖像

在JS部分中添加了帶有注釋的小提琴

結果的屏幕截圖顯示左上角葉子之間的白色，應該是一個35像素的正方形，其中包含一點污垢

解：

通過使用CSS並添加background-color: transparent; 我刪除了div的背景色並獲得了完全透明

Answer 1

默認情況下， div不一定是透明的。 它繼承了其父級的背景。 這很可能是白色的，而不是透明的。

嘗試：

<div style="background-color: rgba(255, 0, 0, 0.5)">.........</div>