今回は、CSSを使用してWEB上にアップロードした２つの画像を重ねて一方の画像の形に切り抜き（マスク）をする方法を紹介します。
マスクとは、画像や要素の不要な部分を隠して見せたい部分のみを表示する技術です。PhotoshopやIllustratorなどの編集ソフトでよく行われる技術です。WEB上では編集ソフトを使わずにCSSのプロパティのみで可能です。
「マスク」「マスキング」「mask」「クリッピングマスク」などと言います。
この様にテキストにもマスクをかける事が可能です。
ただ単に要素同士を重ねたい場合はz-indexを使用します。詳しくは下記の記事。
CSSで2つの画像を重ねてマスク
マスク（切り抜き）をしたい場合は、まずは後ろのレイヤー（切り抜かれる方）のjpg画像と、切り抜く形となるpng画像を用意します。
後ろのレイヤーの背景となる画像に対してCSSプロパティの「mask-image」でマスクしたい画像のURLを指定するだけで完了です。
今回は下記のpng画像（左:サメ）とjpg画像（右:街並み夜景）を使用して説明していきます。
では上記の２つの画像を「mask-image」を使用してマスクしていきます。記述の仕方はこちらです。
HTML
<img src="/wp-content/uploads/2020/05/mannsyonnn.jpeg" alt="" class="mask-sample3">CSS
.mask-sample3 {
-webkit-mask-image: url('/wp-content/uploads/2020/05/same.png'); /*切り抜く形となるpng画像（safari
用）*/
mask-image: url('/wp-content/uploads/2020/05/same.png'); /*切り抜く形となるpng画像*/
-webkit-mask-repeat: no-repeat; /*繰り返さない（safari
用）*/
mask-repeat: no-repeat; /*繰り返さない*/
mask-position: center; /*真ん中に*/
-webkit-mask-position: center; /*（safari
用）*/
}
@media screen and (max-width:575px) {
.mask-sample3 {
-webkit-mask-image: url('/wp-content/uploads/2020/05/same-e1589018206567.png'); /*スマホ用に小さいpngを使用*/
mask-image: url('/wp-content/uploads/2020/05/same-e1589018206567.png'); /*スマホ用に小さいpngを使用*/
}}実際の表示は下記の様になります。
この様に「mask-image: url(‘ここに切り抜きたい形の画像のURL‘);」の部分にサメの画像のURLを入れます。
またmask-imageは対応していないブラウザも多いです。「-webkit-」でwebkid系のブラウザに対応させましょう。
詳細は「Can I use」で確認してください。
CSSで入れた切り抜き用画像は幅の調整が出来ないのでスマホ端末に最適化するには、それ用のマスクの読み込みを用意します。13行目の「@media screen and (max-width:575px)」以降はその記述です。スマホでは、ひと回り小さいサメ画像を読み込んでいます。
url(‘/wp-content/uploads/2020/05/same.png’);の()内のURLを任意のものに変更すれば、後は全てコピペでいけます。
CSSでテキストを画像に重ねてマスク
次にテキストでマスクする方法を紹介します。
テキストでマスクをかけるにはCSSプロパティの「background: url(ここに画像のURL)」を使用して「background-clip: text;」でマスクをかけます。
HTML
<p class="text-mask">この様にテキストにもマスクをかける事が可能です。</p>CSS
.text-mask {
background: url(/wp-content/uploads/2020/05/mannsyonnn.jpeg) no-repeat; /*背景 繰り返し無し*/
padding: 30px;
line-height: 1.4;
font-size:40px;
font-weight:900;
-webkit-background-clip: text; /*マスク（サファリ用）*/
background-clip: text; /*マスク*/
-webkit-text-fill-color: transparent; /*テキストの色を後ろのレイヤーに（透明化）*/
}「background: url(/wp-content/uploads/2020/05/mannsyonnn.jpeg)」の()内を任意のものに変更すれば後はコピペでいけます。
実際の見た目は下記の様になります。
この様にテキストにもマスクをかける事が可能です。
Safariなどwebkid系ブラウザに対応するには「-webkit-text-fill-color」を忘れない様に。
以上が「CSSで2枚の画像を重ねてマスク（切り抜き）をする方法」でした。
今回紹介したマスク処理を理解すれば、一段階レベルの上がったおしゃれWEBデザインが可能となります。
ヘッダーやフッター、サイトタイトルなどにマスクを使用して良い感じのサイトを作ってみましょう。
