複合マスク内のマスク画像ごとに異なるCSSマスク位置値

Question

複合マスクに使用する2つのマスク画像がマスク画像プロパティとして設定されています。私は画像が異なるサイズであり、同じスケールに配置されていないので、各画像に対して異なるマスク位置の値を指定したいと思います。

.my-class { 
    mask-image: url(/masks/foo.png), url(/masks/bar.png); 
    mask-position: ?; /* Set 0 for foo.png, but 15px -50px for bar.png */ 
    mask-size: 100%; 
    mask-repeat: no-repeat; 
} 

foo.pngとbar.pngは異なるマスク位置の値を有していなければなりません。私はfoo.pngに追加する前にbar.pngにオフセットが必要です。

これも可能ですか？

Answer 1

これは、現在の仕様では可能ですが、初期の定義です（実験的なので変更される可能性があります）。 https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position：

mask-position: 0 0, 15px -50px; 

これは、複数の背景画像を配置するパターンに従います。