【CSS Modules】mask-positionプロパティの使い方

mask-positionプロパティは、CSSにおいて要素に適用されるマスク画像の表示位置を保持するプロパティです。CSSのマスキング機能は、ウェブページ上の要素の一部を、指定した画像やグラデーションの形に沿って表示したり、隠したりするために使用されます。このプロパティは、そのmask-imageプロパティで設定されたマスク画像が、対象となる要素内のどこに配置されるかを制御する役割を担います。

mask-positionプロパティに指定できる値は多岐にわたります。例えば、center、top、bottom、left、rightといった位置を示すキーワードを使用できます。また、50%や100pxのように、パーセンテージ値や長さの単位を用いて、より詳細な位置を指定することも可能です。通常は、横方向の位置と縦方向の位置をスペースで区切って設定します。たとえば、mask-position: 20px 30px;と記述することで、マスク画像を要素の左端から20px、上端から30pxの位置に配置できます。mask-position: center top;とすれば、マスク画像は要素の上辺中央に配置されます。

複数のマスク画像が要素に適用されている場合でも、カンマで区切ることで、それぞれのマスク画像に対して個別のmask-positionを設定することが可能です。これにより、複数の異なるマスク効果を、それぞれ独立した位置で表現できるようになります。このプロパティを適切に活用することで、ウェブデザインにおける複雑なマスク表現や、ユーザーインターフェースの視覚的な調整を正確に行うことができます。

Copy
1mask-position: 50% 50%;

引数なし

引数はありません

戻り値なし

戻り値はありません