背景画像をテキストでマスクする機能。非標準。
非標準ではあるが、 Chrome ・ Firefox ・ Safari で対応している模様。
アイディア次第で魅力的なデザインを低コストで実現できる。 JavaScript でテキストを動的に変更するとより効果的だろう。ただしセンスは問われる。
デモ
注意
- 普及しているとはいえ非標準である、機能しない可能性を考慮すること。
- 正確には
-webkit-background-clip: text; というスタイルであり、 background-clip とは対応状況が異なる。
応用例
See the Pen -webkit-background-clip:text CSS effect by Jintos (@Jintos) on CodePen.