0

我有一个导航 div (div A) 水平运行，上面有一个 div (div B) z-indexed，它将包含一个交叉淡入淡出的背景图像系列，使用 jquery 每 5 秒设置一次 background-image 属性。但是，我需要将红色部分“掩盖”在 div 的背景图像上，而蓝色部分需要对较低的 div (div A) 透明。无论显示哪个背景图像，遮罩/剪裁都将应用于并且相同。

由于最终用户可能会上传新图像以用作骑行背景图像，因此无法通过图像编辑器编辑图像以创建遮罩和透明度，因此......

这可以通过应用于背景图像或包含 div (div B) 的 HTML 5 屏蔽/剪辑功能的某种组合来实现吗？如果是这样，有人可以向我展示同时将蒙版/剪辑应用于图像的示例吗？

如果没有，有人可以在上传前建议除图像编辑之外的其他方法吗？

布局样本

4

1 回答 1

0

澄清一下：您希望每个红色像素都变得透明吗？

这是如何做到这一点的解释和演示：http: //jsfiddle.net/m1erickson/2oun9t1x/

  • 在画布上绘制背景图像。

  • 制作仅包含要用作遮罩的红色像素的“遮罩”图像。

  • 将 compositing 设置为“destination-out”，这将导致任何现有像素在与新图形相交的地方变得透明：context.globalCompositeOperation='destination-out'.

  • 绘制红色图像以仅在与这些红色像素相交的位置“擦除”图像。

背景图像（左）和蒙版（右）：

在此处输入图像描述在此处输入图像描述

使用合成遮罩的背景图像：

在此处输入图像描述

于 2014-08-15T21:18:18.037 回答