Javascript元素不透明的情况

时间:2013-08-21 10:46:43

标签: javascript opacity

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

我有一个脚本,其功能是根据用户第一次点击div元素上的鼠标左键以及将鼠标拖到div上的方式在div上绘制一个矩形。

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

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

2 个答案:

答案 0 :(得分:0)

包装元素的不透明度由所有包含元素

继承

你可以通过创建一个大小为1x1px的所需不透明度的png图像来解决这个问题,并将其作为背景图像并重复x和y

答案 1 :(得分:0)

我认为你要做的事情叫做掩蔽,它至少可以用svg来实现。您可以使用一个具有特定不透明度的图层和一个具有矩形属性的蒙版,以便在所需位置的不透明度中“刻出一个洞”。

看看这个: http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-the-mask-property