带有透视文本/图像的黑色叠加层[重复]答案

【问题标题】：Black overlay with see through text/image [duplicate]带有透视文本/图像的黑色叠加层[重复]
【发布时间】：2018-10-17 21:27:37
【问题描述】：

我想实现如下效果：https://wildebeest.com.au/ enter image description here 这是一个视频背景（我已经有），带有黑色覆盖层，当将鼠标悬停在视频显示的文本/图像上时，可以看到文本或图像。

我不知道怎么做，我可以做一个黑色的覆盖，但不能看透文本或悬停。我正在使用带有 divi 主题/构建器的 wordpress。

谢谢。

【问题讨论】：

SO 不是您请求功能的编码服务，我们会为您完成工作。预计您至少会尝试自己编写代码。我建议您通过 Google 或通过搜索 SO 进行一些额外的研究，然后进行尝试。如果您仍然遇到问题，请返回您的代码并在原始问题的正文中说明您尝试过的内容。
我建议做一个黑色的覆盖（带透明度的png），这样字符是透明的，背景是黑色的。然而，在查看牛羚源代码时，它似乎是用 svg 完成的。无论哪种方式，您都需要在正在播放的视频上添加一个叠加层

【解决方案1】：

要实现这一点，首先，您必须检查他们是如何做到的：

他们使用 SVG 矢量格式的叠加图像，https://magc.co/Ul7aQ

您可以使用 Illustrator 等设计工具创建自己的 SVG

这种格式很轻，然后，他们用黑色背景的 div 填充它，所有这些都必须在顶部的一个层中（可能使用 z-index）

其余的是 CSS 过渡，具体取决于您的鼠标位置。

【讨论】：