javascript - Css - 元素重叠的一些 UX 问题

Question

一开始，这是没有示例代码的一般问题，因为我正在寻找一个想法，如何存档:

我有 3 个绝对定位元素，它们相互重叠。它们都有背景颜色，例如红色。

现在，div1 与 div2 重叠，所以它们有公共(public)区域，用户无法看到第一个 div 何时结束，第二个 div 何时开始...

当我在下面的图像上绘制时，我可能会更改此 div 的不透明度，因此用户可以看到一些差异，但这可能不是 100% 好的解决方案。

我的问题是，有没有人有想法，如何使它更具可读性，也许是一些我不知道的 css 功能(背景颜色混合或其他...)

谢谢你的想法:)

Answer 1

您可以使用 rgba 设置背景颜色的不透明度:

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

这需要你的红色、绿色和蓝色，然后是不透明度(从 0 到 1 的十进制形式)。您也可以使用 opacity: 0.8 但它会降低整个 div 的不透明度，包括其边框。