使用绝对定位,我在图像前面放置了一个不透明度为 0.5 的 div
,并为其赋予了更高的 z-index
。同样使用绝对定位,我想使用更高的 z-index
将另一个较小的 div
放在第一个 div
前面。这个较小的 div
将仅显示图像的一部分(如窗口),但没有不透明度。最终,我将使较小的图像可拖动。
我遇到的问题是,只要主 div
的不透明度为 0.5,较小的 div 也会以相同的不透明度显示图片。我该如何克服这个问题?
最佳答案
听起来您已经有了答案,但您可能仍然对实现示例感兴趣。
不透明度为 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 个空间)。
关于JavaScript 不透明问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3500482/