このページは Cloud Translation API によって翻訳されました。

CSS mask-image プロパティを使用して画像に効果を適用する

CSS マスクを使用すると、画像をマスクレイヤとして使用できます。つまり、画像、SVG、グラデーションをマスクとして使用し、画像エディタを使用せずに面白い効果を作成できます。

Rachel Andrew

clip-path プロパティを使用して要素をクリップすると、クリップされた領域は非表示になります。画像の一部を不透明にしたり、他のエフェクトを適用したりする場合は、マスクを使用する必要があります。この記事では、CSS で mask-image プロパティを使用する方法について説明します。このプロパティを使用すると、マスクレイヤとして使用する画像を指定できます。3 つのオプションがあります。画像ファイルは、マスク、SVG、グラデーションとして使用できます。

ブラウザの互換性

CSS マスクはベースラインの新規機能ですが、mask-image の機能のほとんどは、接頭辞 -webkit-mask-image を使用して以前のブラウザバージョンでも使用できます。次の例は、ブラウザのサポートを最大限にするために両方のプロパティを併用する方法を示しています。

画像でマスキングする

mask-image プロパティは background-image プロパティと同様の方法で機能します。url() 値を使用して画像を渡します。マスク画像には、透明または半透明の領域が必要です。

完全に透明な領域は、その領域の下の画像の部分を非表示にします。半透明の領域を使用すると、元の画像の一部が透けて見えます。違いは次の CodePen で確認できます。

最初の画像は、マスクなしの風船の元の画像です。
2 つ目の画像には、背景が完全に透明で白い星が描かれたマスクが適用されています。
3 つ目の画像は、グラデーションの透明度のある背景に白い星が描かれています。

この例では、cover の値を持つ mask-size プロパティも使用しています。このプロパティは background-size と同じように機能します。キーワード cover と contain を使用するか、有効な長さの単位またはパーセンテージを使用して背景にサイズを指定します。

背景画像を繰り返すように、マスクを繰り返して、小さな画像を繰り返しパターンとして使用することもできます。

SVG によるマスク

画像ファイルではなく、SVG を使用することもできます。これを行うには、いくつかの方法があります。1 つ目は、SVG 内に <mask> 要素を配置し、mask-image プロパティでその要素の ID を参照する方法です。

.container img {
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

このアプローチの利点は、マスクを画像だけでなく任意の HTML 要素に適用できることです。

画像をマスクする最も一般的なシナリオでは、代わりに SVG に画像を含めることができます。最初のアプローチは、ベースラインです。SVG 内の画像を含む新規に利用可能なものも、-webkit 接頭辞付きのバージョンをサポートする古いブラウザでサポートされています。

グラデーションによるマスク

マスクとして CSS グラデーションを使用すると、画像や SVG を作成することなく、マスク領域を実現できます。

マスクとして線形グラデーションを使用すると、キャプションの下で画像の下部が暗くなりすぎないようにできます。

サポートされているグラデーションタイプであれば、どれでも使用できます。次の例では、放射状のグラデーションを使用して円形のマスクを作成し、キャプションの背後に光を当てます。

複数のマスク

背景画像と同様に、複数のマスクソースを指定して、それらを組み合わせて目的の効果を得ることができます。これは、CSS グラデーションによって生成されたパターンをマスクとして使用する場合に特に便利です。通常、複数の背景画像を使用するため、簡単にマスクに変換できます。

たとえば、CSS グラデーションを使ったパターンには、チェック柄のパターンがあります。背景画像を使用するコードは次のようになります。

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

このパターンや、背景画像用に設計された他のパターンをマスクに変換するには、background-* プロパティを、接頭辞 -webkit を含む関連する mask プロパティに置き換える必要があります。

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

画像にグラデーションパターンを適用すると、非常に美しい効果を得ることができます。次の CodePen をフォークして、他のバリエーションをテストします。

クリッピングと同様に、CSS マスクは、画像やその他の HTML 要素に興味をそそる効果を追加する方法です。この方法では、グラフィックアプリケーションを使用する必要はありません。