エフェクト
mask-position
mask-position は、マスクの画像を置く位置を指定します。書き方は background-position と同じで、キーワード・長さ・パーセントで横と縦の順に書きます。
構文
<position>#プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
mask-image: url(/mask-star.svg);
mask-repeat: no-repeat;
mask-position: 25% 75%;
}コントロール
四角の中をクリック・ドラッグして中心を動かせます
横の位置
縦の位置
解説
パーセントは「同じ点」を合わせる
% は、画像の X% の点を、領域の X% の点に合わせるという意味です。0% で左端どうし、100% で右端どうしがそろいます。長さ（20px など）は、画像の左上の角を領域の左上からずらす量です。
書き方
- 1 つだけ書くと、もう片方は
centerになります。 - キーワードどうしなら順不同です（
top rightとright topは同じ）。 right 20px bottom 10pxのように、キーワードのあとに長さを続けると、その辺からの距離になります（このページのコントロールでは扱っていませんが、コードには書けます）。
気をつけること
- 初期値は
0% 0%（左上）です。画像をくり返す設定のときは、ここで決めた位置が並びの基準になります。 - 位置の基準になる領域は
mask-originで決まり、初期値は border の外側までです。padding までを基準にする背景とは違うので、枠線のある要素では同じ値でも位置がずれます。 no-repeatのときは、画像の外では要素が見えなくなります。位置を動かすと、見える部分が動きます。-webkit-の付かない名前に対応したのは、Chrome・Edge は 120、Safari は 15.4 からです。それより古いブラウザには-webkit-mask-positionと書きます。- このページのプレビューでは、星の画像（96×96）をくり返さない設定でマスクにしています。