CSS/JS画像テキストオーバーレイのような格子

Question

が可能かどうかは疑問でした。私はJSとCSSを学び、googleとStackOverflowを検索しましたが、答えは出ません。 ALYSSAのSの1つは、モデルの手でカバーされています。説明したくない場合は、効果の名前を教えてください。

Answer 1

PhotoShopや他の画像編集アプリで行っていると思います。 https://assets.awwwards.com/awards/external/2017/02/58ad59d717a01.jpg 単なる画像です。コーディングなし。

でも、z-インデックスを使用できます。 異なる要素にALYS、異なる要素にSA MI、異なる要素にLLERを配置します。

cssよりもこれらの要素のz-indexを適切に配置します。

z-indexプロパティは、要素のスタック順序を指定します。

IMP：スタックの順序が大きい要素は、常にスタックの順序の低い要素の前にあります。

注：zインデックスは、位置指定された要素（位置：絶対、位置：相対、または位置：固定）でのみ機能します。

Answer 2

このイメージはPhotoshopで作成されていますが、mask CSS属性を使用してテキストを上に置くと、これを再現できます。あなたは3つのレイヤーで終わるでしょう：バックグラウンドのメインイメージ、テキストレイヤー、そしてメインイメージを再度マスクします。マスク画像はグラフィックプログラム内に作成され、白である腕の部分を除いてほとんど黒色になります。