画像をマスク処理する方法 (mask-image) [CSS]

マスク

指定された画像あるいは要素をマスクとして処理する。

• mask-image
• mask-size
• mask-repeat
• mask-mode
• mask

使い方

参考：

CSS マスキング mask-image の使い方 | Web Design Leaves

CSS のみで画像のマスキング – Qiita

CSS のみでテキストにグラデーションやリフレクトをかけるテクニック | くらげだらけ

mask プロパティで画像を切り抜く方法／マスク処理 | Tech dig

mask – マスキング | プログラマカレッジ

mask-image | HTML クイックリファレンス

Clipping and Masking in CSS | CSS-Tricks

Masking Images in CSS Using the mask-image Property | DigitalOcean

mask-mode

• alpha：アルファチャンネルがマスク値として使用される。
• luminance：画像ピクセルの明度がマスク値として使用される。
• match-source：mask-image の指定が url() によるマスクの場合は明度がマスク値として使用され、画像の場合はアルファチャンネルがマスク値として使用される。(デフォルト)

参考：

mask-mode | MDN

mask-mode | Codrops

mask-size

• auto：自動 (デフォルト)
• contain：背景領域に収まるように拡大縮小される。
• cover：背景領域を覆うように拡大縮小される。
• サイズ：幅／高さを指定する。

参考：

mask-size | HTML クイックリファレンス

mask-size | MDN

一括指定 (mask)

参考：

mask | HTML クイックリファレンス

mask | MDN

クリッピングとの違い

• mask-image
• clip-path
• clipPath 要素 (SVG)

参考：

CSS で切り抜くあれこれ／clip-path と mask-image の違い | 長谷川満

SVG 画像を背景にして色を変更したい

.background {
    background-color: #7ecc78;
    -webkit-mask-image: url('/images/background.svg');
    mask-image: url('/images/background.svg');
}
Code language: CSS (css)

参考：

How to modify the fill color of an SVG image when being served as background image? – Stack Overflow

Can I Use

Firefox 以外は、ベンダープレフィックス -webkit- を付ける必要がある。

• mask-image：Firefox
• -webkit-mask-image：Chrome / Edge / Safari

参考：

CSS Masks | Can I Use Support Tables

mask-image | Can I Use Support Tables

mask-image: SVG Masks | Can I Use Support Tables

mask-image: Multiple Mask Images | Can I Use Support Tables