background-clipで背景画像をマスクする方法をご紹介します。
使用方法
上記サムネイル画像のサンプルコードになります。
HTML
|
1 2 3 4 5 |
<main> <div class="bg_clip"> BACKGROUND<br>CLIP </div> </main> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
* { margin: 0; font-family: 'Helvetica Neue' sans-serif; } html, body { height: 100%; background: #000; } main { display: flex; justify-content: center; align-items: center; height: 100%; background-image: url("sample_bg.jpg"); background-clip: text; /* 要素の背景をテキストに設定 */ -webkit-background-clip: text; color: transparent; /* テキストを透過 */ text-align: center; } main .bg_clip { font-size: 5rem; font-weight: bold; letter-spacing: 1.5rem; } |
対応ブラウザ
background-clip – CSS: カスケーディングスタイルシート | MDN2021年12月現在、IEではbackground-clipのtextプロパティがサポート外のようです。
まとめ
このようにbackground-clipを使用すれば、CSSでのデザインの幅が広がりますね。
ただ、IEはサポート対象外なのでそこは注意しましょう。IE消滅しないかな、、
Company運用会社
株式会社トランソニックソフトウェア
名古屋市でシステム開発・WEB制作を中心に事業を展開しています。システムに関すること、なんでもお気軽にご相談ください！
Search記事検索
Popular人気記事
