CSS / JS图像文本叠加像莱迪思

Question

我想知道是否可能。我正在学习JS和CSS并在google和StackOverflow上搜索但没有回答。来自ALYSSA的S之一正在被模型的手所覆盖。如果您不想解释，请告诉我效果的名称。

Answer 1

虽然此图像是在Photoshop中构建的，但您可以使用mask CSS属性将手臂放在文本上来重现此图像。最终会有3层：背景中的主图像，文本图层，然后是主图像，但是带有遮罩。掩模图像将在图形程序中创建，除了白色的手臂外，大部分都是黑色。

Answer 2

我认为它是由PhotoShop或任何其他图像编辑应用程序完成的。 https://assets.awwwards.com/awards/external/2017/02/58ad59d717a01.jpg 它只是一个图像。没有编码。

你可以使用z-index。 把ALYS放在不同的元素中，不同元素中的SA MI和不同元素中的LLER。

比在css中相应地排列这些元素的z-index。

z-index属性指定元素的堆栈顺序。

IMP：堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

注意：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。