假设我有一个不透明度设置为 0.5 的 div 元素。
我有一个脚本,其功能是根据用户第一次用鼠标左键单击 div 元素以及他将鼠标拖到 div 上的方式在 div 上绘制一个矩形。
我试图弄清楚如何使用户绘制的矩形不受 div 容器元素的不透明度的影响。
例如,如果您将照片上传到 google+,则可以选择裁剪图像的某些部分,以便只看到您的脸。他们有我正在寻找的这种功能。例如,当您在要裁剪的图像上绘制部分时,图像不透明度设置为 0.5,但您正在绘制的区域清楚地显示了图像的原始样式。
假设我有一个不透明度设置为 0.5 的 div 元素。
我有一个脚本,其功能是根据用户第一次用鼠标左键单击 div 元素以及他将鼠标拖到 div 上的方式在 div 上绘制一个矩形。
我试图弄清楚如何使用户绘制的矩形不受 div 容器元素的不透明度的影响。
例如,如果您将照片上传到 google+,则可以选择裁剪图像的某些部分,以便只看到您的脸。他们有我正在寻找的这种功能。例如,当您在要裁剪的图像上绘制部分时,图像不透明度设置为 0.5,但您正在绘制的区域清楚地显示了图像的原始样式。
我认为您正在尝试做的事情称为遮罩,至少可以使用 svg 来实现。您可以拥有一个具有特定不透明度的图层和一个具有矩形属性的蒙版,以便在所需位置的不透明度中“烧一个洞”。
看看这个: http ://www.html5rocks.com/en/tutorials/masking/adobe/#toc-the-mask-property
包装元素的不透明度由所有包含元素继承,
您可以通过创建一个具有所需不透明度、大小为 1x1px 的 png 图像来简单地解决这个问题,并将其作为背景图像并重复 x 和 y