CSS マスキングでは、画像をマスクレイヤとして使用できます。つまり、画像エディタがなくても、画像、SVG、グラデーションをマスクとして使用して面白い効果を作り出すことができます。
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 での違いを確認できます。 1 つ目の画像は、マスクのない風船の元の画像です。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-* プロパティを関連する mask プロパティ（-webkit プレフィックス付きプロパティなど）に置き換える必要があります。
-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 より）。