CSSでマスク画像を自由自在に配置：mask-originプロパティの使い方とサンプルコード集

CSSのmask-originプロパティは、要素に適用されたマスク画像の位置を制御します。マスク画像は、要素の一部のみを表示するために使用される特殊な画像です。mask-originプロパティは、マスク画像の原点が要素内のどの位置に配置されるかを決定します。

構文

mask-origin: <geometry-box> | auto;

auto: ブラウザがデフォルトの位置を決定します。
<geometry-box>: マスク画像の原点が配置される領域を定義します。詳細は後述します。

値

<geometry-box>値には、以下の要素を1つまたは2つ指定できます。

'center': マスク画像が要素の中央に配置されます。
'cover': マスク画像が要素全体を覆うように配置されます。
'contain': マスク画像が要素内に完全に収まるように配置されます。
長さ値: ピクセル値、パーセンテージ値、またはkeywordを使用できます。

2つの値を指定した場合、最初の値はmask-originプロパティを、2番目の値はmask-clipプロパティを設定します。mask-clipプロパティは、マスク画像が適用される領域を定義します。

例

div {
  mask-image: url('mask.png');
  mask-origin: 50% 20%;
}

この例では、mask.png画像が要素にマスクとして適用され、マスク画像の原点が要素の幅の50%、高さの20%の位置に配置されます。

ブラウザサポート

mask-originプロパティは、比較的新しいプロパティであり、すべてのブラウザでサポートされているわけではありません。最新のブラウザでは広くサポートされていますが、古いブラウザではサポートされていない可能性があります。

マスク画像は、複雑な形状の要素を作成するために使用できます。
mask-originプロパティとmask-positionプロパティは似ていますが、異なる機能を果たします。mask-originプロパティはマスク画像の原点を設定し、mask-positionプロパティはマスク画像の位置をオフセットします。
mask-originプロパティは、要素のペディングとボーダーの影響を受けます。

例1：マスク画像を要素の中央に配置する

div {
  mask-image: url('mask.png');
  mask-origin: center;
}

この例では、mask.png画像が要素にマスクとして適用され、マスク画像が要素の中央に配置されます。

例2：マスク画像を要素の左上に配置する

div {
  mask-image: url('mask.png');
  mask-origin: 0 0;
}

例3：マスク画像を要素の幅の50%、高さの20%の位置に配置する

div {
  mask-image: url('mask.png');
  mask-origin: 50% 20%;
}

例4：マスク画像を要素のペディングとボーダーの影響を受けずに配置する

div {
  mask-image: url('mask.png');
  mask-origin: border-box;
}

この例では、mask.png画像が要素にマスクとして適用され、マスク画像が要素の境界ボックスの中央に配置されます。ペディングやボーダーは、マスク画像の配置に影響を与えません。

例5：マスク画像を要素のサイズに拡大して配置する

div {
  mask-image: url('mask.png');
  mask-origin: contain;
}

この例では、mask.png画像が要素にマスクとして適用され、マスク画像が要素全体を覆うように拡大されます。

例6：マスク画像を要素のサイズに縮小して配置し、余白を切り捨てる

div {
  mask-image: url('mask.png');
  mask-origin: cover;
}

この例では、mask.png画像が要素にマスクとして適用され、マスク画像が要素全体を覆うように縮小されます。余白は切り捨てられます。

代替方法1：SVGマスクを使用する

SVGマスクは、mask要素を使用して定義されたベクターグラフィックを使用してマスクを作成する方法です。mask-originプロパティと同様に、SVGマスクを使用してマスク画像の原点を制御できます。SVGマスクは、より柔軟で強力なマスクを作成するために使用できますが、mask-originプロパティよりも複雑です。

<svg id="mask">
  <rect width="100%" height="100%" fill="#fff" />
  <circle cx="50%" cy="50%" r="40%" fill="#000" />
</svg>

<img src="image.png" mask="url(#mask)" />

この例では、円形のマスクがimage.png画像に適用されます。マスクの原点は、円のの中心になります。

代替方法2：クリップパスを使用する

クリップパスは、要素の形状を定義するために使用されるパスです。mask-originプロパティと同様に、クリップパスを使用してマスク画像の原点を制御できます。クリップパスは、比較的単純なマスクを作成するために使用できますが、SVGマスクほど柔軟ではありません。

div {
  clip-path: circle(50% 50% at 40%);
}

#image {
  width: 100%;
  height: 100%;
}

この例では、円形のクリップパスが#image要素に適用されます。クリップパスの原点は、円のの中心になります。

代替方法3：複数の背景画像を使用する

複数の背景画像を使用して、マスク効果を作成することもできます。この方法は、比較的単純ですが、複雑なマスクを作成するには適していません。

div {
  background-image: url('image.png'), url('mask.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

この例では、image.png画像とmask.png画像がdiv要素に背景画像として設定されます。mask.png画像がimage.png画像の上に配置され、マスク効果が作成されます。

どの代替方法を使用するべきか

使用する代替方法は、要件によって異なります。

古いブラウザでのサポートが最も重要であれば、複数の背景画像を使用する方がよいでしょう。
比較的単純なマスクが必要な場合は、クリップパスまたは複数の背景画像を使用する方がよいでしょう。
SVGマスクが必要な場合は、最も柔軟で強力なオプションですが、複雑でもあります。