CSS-元素重疊的一些UX問題

Question

開始時，這是沒有示例代碼的普遍問題，因為我正在尋找一個想法，如何將其歸檔：

我有3個絕對定位的元素，它們相互重疊。 它們都有背景顏色，例如紅色。

現在，div1與div2重疊，因此它們具有公共區域，並且用戶無法看到第一個div何時結束以及secod開始...

當我在下面的圖像上繪制時，我可能會改變此div的不透明度，因此用戶可以看到一些差異，但這可能不是100％好的解決方案。

我的問題是，是否有人有想法，如何使其更具可讀性，也許有一些CSS功能，而我不知道（背景色混合之類的東西...）

謝謝你的想法:)

Answer 1

您可以使用rgba設置背景顏色的不透明度：

.div { background-color: rgba(255,0,0,0.8); }

這將使您的紅色，綠色和藍色變為不透明（十進制形式從0到1）。 您也可以使用opacity：0.8，但是它會降低整個div（包括其邊界）的不透明度。

Answer 2

另一個想法不是僅使用透明的背景色，而是使用不同方向的透明線條和哈希。 如下圖所示。

但是您可以使線條有點透明，並具有不同的角度和顏色。 這樣，div的區別將更加優雅。 而不是一團糟的顏色。