エフェクト
mask-image
mask-image は、画像やグラデーションの透明度を使って、要素の一部を透けさせます。端をふわっと消したり、模様の形にくり抜いたりできます。
構文
<mask-reference>#
<mask-reference> = none | <image> | <mask-source>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
mask-image: linear-gradient(
to bottom,
#000000 40%,
#00000000
);
}コントロール
<image>linear-gradient()
linear-gradient()
repeating-
directionto bottom
color-stop-list
マーカーをドラッグして位置を動かせます
#000000 40%
色
位置
2 つ目の位置
#00000000
カラーヒント（前の色との中間点）
色
位置
解説
効くのは透明度だけ
マスクの画像が不透明な所は要素がそのまま見え、透明な所は見えなくなり、半透明の所は半分透けます。色そのものは関係ありません。このページでは黒（#000000）と透明（#00000000）で書いていますが、赤と透明でも結果は同じです。
このページのコントロールは、グラデーションの 3 つのページと同じものです。url() で画像や SVG の <mask> を指定することもできます。
clip-path との違い
clip-path は図形の内と外できっぱり切り抜きますが、mask-image は透明度の段階を使えるので、境目をぼかせます。どちらもレイアウト上の大きさは変わりません。
大きさと繰り返し
マスクの画像は背景画像と同じように並べられます。mask-size mask-position mask-repeat は background-size などと同じ書き方で、mask ショートハンドでまとめて書けます。カンマで区切ると複数のマスクを重ねられます。