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() 値を使用して画像を渡します。
マスク画像には透明または半透明の領域が必要です。
完全に透明な領域では、その領域の下の画像部分は見えなくなります。 ただし、半透明の領域を使用すると、元の画像の一部が透けて見えます。 以下のグリッチで違いを確認できます。 1 つ目の画像は、マスクのない風船の元の画像です。 2 つ目の画像にはマスクが適用されており、完全に透明な背景の上に白い星が付いています。 3 つ目の画像では、グラデーションの透明度が設定された背景に白い星が表示されています。
この例では、mask-size プロパティの値を cover に指定しています。
このプロパティは 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 より