画像によるマスク

要素を画像の透明度でマスクするスタイル。
マスクとなる画像と位置などを指定できる。

効果についてはテキストによるマスクと同様。マスクのシェイプを自由に設定できる点はアドバンテージだが、テキストのように変更はできない点がネック。

デモ

注意

• 仕様上は様々な設定を持つ。
  が、ほとんど実装されていない環境が多いため、基本的な設定のみ使用した方が良い。

応用例

See the Pen X-Ray Effect with a CSS Mask by Erik Rahm (@erikrahm) on CodePen.