jquery - 如何在悬停时为 png 图像的特定部分提供投影？

Question

我有一个 png 图像设置为背景...

它在响应式 View 中完全显示...

每当我将鼠标悬停在该图像的一部分时，只有该特定部分应该具有投影效果。

这有可能吗？我该怎么做？

Answer 1

在 CorelDRAW 中从矢量文档生成背景图像。您想要投影的每个组件都应该是它自己的对象(或对象组)。

栅格化。

现在，使图像的给定部分具有阴影。光栅化。重复，给每个人起一个有用的名字。

在原始图像和阴影图像之间生成差异。一种方法可能是将原始图像与投影图像进行异或运算。另一种方法可能是对它们进行反向 alpha 合成。

大部分差异应该为零。从差异图像中去除一个矩形。

现在，在 CSS 中，当您希望显示阴影时，使用与您用于生成差异的操作相反的混合模式。如果您使用 xor 进行比较，请在 diff-image 和原始图像之间使用 xor。如果您使用了 reverse-alpha-composite，请使用 alpha-compositing。

我不是 css3 混合如何工作的专家，您将不得不尝试使用什么 diff 模式和什么混合模式。

您也可以只在整个渲染图像之间交换。