為什麼堆疊的半透明盒子會依照順序顯示不同的顏色？

堆疊的半透明盒子表現出與順序相關的顏色變化

堆疊兩個半透明盒子時，觀察到的最終顏色會根據不同的顏色而有所不同排列順序。這種現象的發生是由於每種情況下的顏色組合不同。

色差說明

在第一種情況下，頂部框（不透明度為 50%）包含藍色並允許底框貢獻 50% 的紅色。因此，整體顏色是 50% 藍色和 25% 紅色的組合（因為剩餘 50% 的紅色被藍色遮蓋了）。

但是，在第二種情況下，方框是相反的。現在，頂部框的紅色不透明度為 50%，並允許底部框貢獻 50% 的藍色。整體效果是不同的組合：50% 紅色和 25% 藍色。由於比例不一樣，所以顏色看起來不同。

實現顏色一致性

為了獲得相同的顏色，無論盒子順序如何，每層中的顏色比例必須相同。換句話說，頂層應允許相同比例的底層顏色通過。

例如，考慮以下設定：

• 頂層：25% 不透明度(0.25) 藍色
• 底層：33.3% 不透明度(0.333)紅色

在這種情況下，兩個圖層都允許25%的其他顏色透過。因此，無論順序如何，生成的顏色都是相同的（25% 藍色和 75% 透明的混合）。

以上是為什麼堆疊的半透明盒子會依照順序顯示不同的顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！