JavaScript 不透明问题

Question

使用绝对定位，我在图像前面放置了一个不透明度为 0.5 的 div，并为其赋予了更高的 z-index。同样使用绝对定位，我想使用更高的 z-index 将另一个较小的 div 放在第一个 div 前面。这个较小的 div 将仅显示图像的一部分(如窗口)，但没有不透明度。最终，我将使较小的图像可拖动。

我遇到的问题是，只要主 div 的不透明度为 0.5，较小的 div 也会以相同的不透明度显示图片。我该如何克服这个问题？

Answer 1

听起来您已经有了答案，但您可能仍然对实现示例感兴趣。

不透明度为 0.5 的 div 不能是不透明度为 0.5 的 div。它必须至少为 4 个 div，不透明度为 0.5，但可能最灵活为 8。它们将一起在 3x3 网格中形成 8 个图 block ，没有中心图 block 。它们各自具有 0.5 的不透明度，并且中心图 block 不存在，因此具有完全不透明度。然后，您可以自由地调整中间负空间的尺寸，调整各个图 block 的大小以匹配。

如果您想让中心区域可拖动，那么它将是不透明度为 0 的第 9 个 div 和一个拖动处理程序。

希望有帮助。 imgAreaSelect 插件似乎使用 4 个图 block ，其中最左边和最右边的图 block 占据整个垂直区域(即每个图 block 在 3x3 网格中占据 3 个空间)。