【CSS Modules】mask-imageプロパティの使い方
mask-imageプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
mask-imageプロパティは、要素にマスクを適用する際に使用する画像またはグラデーションを保持するプロパティです。このプロパティを使用すると、要素の表示領域を制限したり、要素の一部を透過させたりする視覚効果を作成できます。
具体的には、指定された画像やグラデーションの輝度（明るさ）またはアルファチャネル（透明度）が、マスクとして機能します。例えば、明るい部分は要素が表示され、暗い部分は隠されます。透明な部分は要素を完全に透過させ、半透明な部分は要素を部分的に透過させます。
このプロパティには、主に以下の値を設定できます。一つはurl()関数を使用して外部の画像ファイル（PNGやSVGなど）を指定する方法です。これにより、複雑な形状の画像をマスクとして利用できます。もう一つは、linear-gradient()やradial-gradient()といったCSSグラデーション関数を指定する方法です。グラデーションをマスクとして使用することで、滑らかなフェード効果や、画像ファイルに依存しない動的なマスクを作成できます。また、noneを指定すると、マスクは適用されません。
mask-imageプロパティは、単独で使用するだけでなく、mask-mode、mask-repeat、mask-sizeなどの他のマスク関連プロパティと組み合わせることで、マスクの適用方法や位置、サイズなどを細かく制御できます。これにより、ウェブデザインにおいて、より表現豊かでインタラクティブな視覚効果を実現するための強力なツールとなります。
公式リファレンス: mask-image
構文(syntax)
1mask-image: url('path/to/mask.png');
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません