CSS/JS圖像文本疊加像格子

-2

我想知道 this 是否可能。我正在學習JS和CSS，並在谷歌和StackOverflow上搜索，但沒有回答。 ALYSSA的S之一正在被模型的手所覆蓋。如果您不想解釋，請告訴我效果的名稱。CSS/JS圖像文本疊加像格子

2017-02-28 ZeuS

我想這只是一個在Photoshop中創建的圖像。 – Brad

您可以使用'z-index'屬性和'絕對'定位將元素疊加在一起。但正如指出它可能只是在Photoshop中完成 – zik

@Brad我知道，但這可以通過使用CSS和JS來實現，並且仍然可以做出反應？ – ZeuS

-4

我認爲這是由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僅適用於定位元素（位置：絕對，位置：相對或位置：固定）。

2017-02-28 11:40:04

他的問題是關於懸停效果，而不是關於圖片 – MKAD

儘管此圖像是在Photoshop中構建的，但您可以通過使用mask CSS屬性將手臂放在文本上進行重現。你最終會得到3個圖層：背景中的主圖像，文本圖層，然後是主圖像，但帶有蒙版。蒙版圖像將在圖形程序中創建，並且除了一塊白色的手臂之外大部分都是黑色的。

2017-02-28 11:42:52

回答