CSSを使用してクリッピングするためのclip-pathプロパティの使用について説明したので、マスキングを検討するのは当然のことです。 画像または要素の一部が完全に非表示または完全に表示されるクリッピングとは異なり、マスキングを使用すると、不透明度のレベルが異なる画像の一部を非表示または表示できます。

CSSでのマスキングは、 mask-image プロパティを使用して行われ、画像をマスクとして提供する必要があります。 画像マスクで100%黒であるものはすべて完全に表示され、100%透明であるものはすべて完全に非表示になり、その間のものは部分的に画像をマスクします。 CSSのLinearおよびradialグラデーションは生成された画像であるため、画像マスクとして使用できます。 mask 要素を使用するSVGは、イメージマスクとしても使用できます。 具体的な例を使用して、イメージマスクの3つの可能性について見ていきましょう。

グラデーションを使用したマスキング

まず、透明から黒に変化する単純な線形グラデーションを使用しましょう。 最初の画像はデフォルトの開始画像であり、2番目の画像にはmask-image値として線形グラデーションが適用されています。

Without mask
With gradient mask

ここで使用されるCSSルールは次のとおりです。

.mask1 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
  mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
}

グラデーションを使用したマスキングで実現できる興味深い効果の例をさらに2つ示します。

Gradient mask example 2
Gradient mask example 3

そして、これら2つのグラデーションマスクのCSSルールは次のとおりです。

.mask2 {
  -webkit-mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
  mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
  mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
}

画像を使用したマスキング

これは、Sketchを画像マスクとして使用して作成された画像を使用しています。 最初の画像は画像マスク自体であり、2番目の画像にはそのマスクが適用されています。

Image mask
With image mask

そして、CSSは次のようになります。

.mask4 {
  -webkit-mask-image: url("/path/to/image-mask.png");
  mask-image: url("/path/to/image-mask.png");
  -webkit-mask-size: 400px 600px;
  mask-size: 400px 600px;
}

ここでは、画像マスクが 800px x 1200px であるため、 mask-size の値を指定しましたが、ここでは、画像が見えるようにすべてを半分に縮小します。網膜ディスプレイでシャープ。

SVGマスクを使用したマスキング

最後に、SVGが溝である場合は、SVG mask要素を使用して画像マスクを定義できます。

最初の例は現在Firefoxでのみ機能しているようです(サポートされていないブラウザではおそらく何も表示されません)。 SVG mask を定義し、通常どおりCSSでマスクのIDを参照します。 2番目の例は、より幅広いサポートがあるようで、画像をSVG要素自体の一部として定義しています。

また、SVGマスクでは、使用する色が透明で黒ではなく、白と黒であることに注意してください。 色も逆に機能し、白/部分的に白が表示されます。

CodePenのalligatorio @alligatorio )によるペンmdPBExvを参照してください。

例1(三角形)

最初の例のSVGマークアップは次のとおりです。

<svg width="0" height="0" viewBox="0 0 400 600">
  <defs>
    <mask id="my-svg-mask">
      <rect fill="#000000" x="0" y="0" width="400" height="600"></rect>
      <polygon fill="#FFFFFF" points="200.5 152 349 449 52 449"></polygon>
    </mask>
  </defs>
</svg>

次に、SVGマスクのIDを参照することにより、通常どおりmask-imageを使用して画像にマスクを適用できます。

.mask5 {
  -webkit-mask-image: url(#my-svg-mask);
  mask-image: url(#my-svg-mask);
}

例2(泡)

2番目のSVGの例では、メインイメージ自体を含め、すべてがSVG定義に含まれています。

<svg width="400px" height="600px" viewBox="0 0 400 600">
  <defs>
    <mask id="my-svg-mask2">
      <rect id="Rectangle" fill="#000000" x="0" y="0" width="400" height="600"></rect>
      <circle id="Oval" fill="#FFFFFF" cx="67.5" cy="51.5" r="67.5"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="296.597656" cy="118.597656" r="56.5976562"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="53.4648437" cy="256.464844" r="81.4648437"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="239.587891" cy="313.587891" r="70.5878906"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="366.597656" cy="562.597656" r="56.5976562"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="93.203125" cy="486.203125" r="76.203125"></circle>
    </mask>
  </defs>
  <image mask="url(#my-svg-mask2)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/css/masking/masking-example1.jpg" width="400" height="600"></image>
</svg>