では、mask系CSSプロパティについて、概要を見ていきましょう。
設定の仕方はbackgroundプロパティとよく似ています。 ※サンプルの背景色は、透明部分をわかりやすくするためにつけてあります。

mask-imageプロパティ

mask-image: url(url)

PNG、GIF、SVG など、透過部分を持った画像をマスクに指定します。

×



=

マスク部分は隠れるのではなく、表示される、ということに注意して下さい。
透明化処理から保護するためのマスク、というイメージです。

.mask1{
  -webkit-mask-image: url(マスク用画像のURL);
  mask-image: url(マスク用画像のURL);
}

webkit系ブラウザのためのベンダープレフィックス-webkit-は常に、このように並記する必要がありますが、以下のコード例では省略しています。

mask-image: url(url1, url2, ...)

マスク用の画像は複数指定できます(Firefox のみ)。

これはちょっとナンセンスな例ですが…

×

=

×

×

=

.mask2{
  mask-image: url(マスク用画像1のURL), url(マスク用画像2のURL);
}

複数のマスク用画像が合成されてひとつのマスクになります。

mask-image: linear-gradient()

CSSでグラデーションを指定します。
こちらはマスク用の画像を用意しなくていいので、より手軽です。
また、PNGなどラスタ画像のマスクに比べると、拡大してもグラデーションが滑らかで美しいです。

×

CSS

=

.mask3{
  mask-image: linear-gradient(-90deg, transparent 0%, blue 30%, blue 70%, transparent 100%);
}

色指定でblueにしているところは、完全な透明色以外なら何でもいいです。

mask-image: radial-gradient()

(楕)円形グラデーションにはradial-gradient()関数を使います。

×

CSS

=

.mask4{
  mask-image: radial-gradient(closest-side, blue 80%, transparent 100%);
}

古いバージョンの weblit系ブラウザでは

-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色))

というややこしい書き方をしなければならなかったようですが、最新版では普通にradial-gradient()に-webkit-をつけるだけでちゃんと反映されますね。

mask-repeatプロパティ

同じマスクをリピート表示し、タイルのように並べることができます。
ここでは Google先生からお借りしたこちらのブクマアイコンのSVG画像ic_bookmark_48px.svgを、マスクとして使用させていただきます。

mask-repeat: repeat

マスクが縦横にリピートされます。



.mask5{
  mask-image: url(ic_bookmark_48px.svg);
  mask-repeat: repeat;
}

mask-repeat: space

マスクを適用する要素の大きさに合せて、マスクが見切れないように、いい感じに余白が入ります。
マスクの表示開始位置を指定するmask-positionプロパティは無視されます。



.mask6{
  mask-image: url(ic_bookmark_48px.svg);
  mask-repeat: space;
}




mask-repeat: round

上とほぼ同じですが、mask-positionプロパティを指定して、マスクの表示位置をずらすことができます。



.mask7{
  mask-image: url(ic_bookmark_48px.svg);
  mask-repeat: round;
  mask-position: 24px 24px;
}




mask-repeat: repeat-x

マスクは横方向にだけ繰り返されます。

mask-repeat: repeat-y

マスクは縦方向にだけ繰り返されます。

mask-repeat: no-repeat

マスクは一つだけ表示されます。

mask-sizeプロパティ

マスクの大きさを変えます。単位は px、%、em、remなど。
%は親要素に対する比率です。
calc(100%/n)を指定すると、ちょうどn分割されます(IE8以下とAndroid4.3以下は非対応)。

.mask8{
  mask-image: url(ic_bookmark_48px.svg);
  mask-repeat: space;
  mask-size: 96px;
}

mask-modeプロパティ

このプロパティは、今のところ Firefox だけがサポートしています。

mask-mode: alpha

何も指定しなければこれが適用されます(初期値)。
マスク画像の不透明度(アルファ値)に応じてマスク処理が行われます。
上の例はすべてこれです。

mask-mode: luminance

色の明るい部分がマスクされ、暗くなるほど透明化処理がされます。
アルファチャンネルを持たないJPG画像をマスクとして使うことができます。

×

=

mask9{
  mask-image: url(マスク用画像のURL);
  mask-mode: luminance;
}

参考サイト様

MDN｜MOZILLA DEVELOPER NETWORK