Javascript 元素不透明情况答案

【问题标题】：Javascript element opacity situationJavascript 元素不透明情况
【发布时间】：2013-08-23 16:51:43
【问题描述】：

假设我有一个不透明度设置为 0.5 的 div 元素。

我有一个脚本，它的功能是根据用户第一次用鼠标左键单击 div 元素以及他在 div 上拖动鼠标的方式在 div 上绘制一个矩形。

我试图弄清楚如何使用户绘制的矩形不受 div 容器元素的不透明度的影响。

例如，如果您将照片上传到 google+，则可以选择裁剪图像的某些部分，以便只看到您的脸。他们有我正在寻找的这种功能。例如，当您在图像上绘制要裁剪的部分时，图像的不透明度设置为 0.5，但您正在绘制的区域清楚地显示了图像的原始样式。

【问题讨论】：

【解决方案1】：

包裹元素的不透明度被所有包含的元素继承，

您可以简单地通过创建一个具有所需不透明度、大小为 1x1px 的 png 图像并将其作为背景图像并重复 x 和 y 来解决此问题

【讨论】：

【解决方案2】：

我认为您正在尝试做的事情称为遮罩，至少可以使用 svg 来实现。您可以拥有一个具有特定不透明度的图层和一个具有矩形属性的蒙版，以便在所需位置的不透明度中“烧一个洞”。

【讨论】：