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

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

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

Rachel Andrew

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

ブラウザの互換性

ほとんどのブラウザは、標準の CSS マスクプロパティを部分的にしかサポートしていません。ブラウザとの互換性を最大限に高めるには、標準プロパティに加えて -webkit- 接頭辞を使用する必要があります。ブラウザのサポートに関する詳細情報については、CSS マスクを使用できますか？をご覧ください。

対応ブラウザ

ソース

接頭辞付きプロパティを使用したブラウザのサポートは良好ですが、マスクを使用して画像の上にテキストを表示する場合は、マスクを使用できない場合にどうなるかを注意してください。マスクされたバージョンを追加する前に、特徴クエリを使用して mask-image または -webkit-mask-image のサポートを検出し、読み取り可能な代替手段を提供することをおすすめします。

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

画像によるマスキング

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

完全に透明な領域は、その領域の下の画像の部分を非表示にします。半透明の領域を使用すると、元の画像の一部が透けて見えます。違いは以下の Glitch で確認できます。最初の画像は、マスクのない風船の元の画像です。2 つ目の画像には、背景が完全に透明で白い星が描かれたマスクが適用されています。3 つ目の画像は、グラデーションの透明度のある背景に白い星が描かれています。

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

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

SVG によるマスキング

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

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

このアプローチの利点は、マスクを画像だけでなく任意の HTML 要素に適用できることです。残念ながら、この方法をサポートしているのは Firefox のみです。

ただし、画像をマスクする最も一般的なシナリオでは、画像を SVG に含めることができます。

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

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

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

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

複数のマスクを使用する

背景画像と同様に、複数のマスクソースを指定して、それらを組み合わせて目的の効果を得ることができます。これは、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;

画像にグラデーションパターンを適用すると、非常に美しい効果を得ることができます。Glitch をリミックスして、他のバリエーションを試してみてください。

クリッピングと同様、CSS マスクは、画像やその他の HTML 要素にグラフィックアプリケーションを使用せずに魅力を追加する方法です。

写真提供: Julio Rionaldo（Unsplash）。