執(zhí)筆時(shí)點(diǎn)で、インラインSVGグラフィック內(nèi)の要素を使用してHTML要素をマスクしてFirefoxブラウザーでのみ動(dòng)作します。例を次に示します：

次のCSSを使用して

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

上記のコードには、

mask1のIDを含む要素を含めました。マスクの內(nèi)部には、段階のIDと勾配を塗りつぶしの色として使用する円形の白黒勾配を配置しました。 最後に、CSS MaskプロパティでSVG 要素のID値を參照しました。 これにより、ページ上の畫像にマスキング効果が適用されます。

。

SVGグラフィックでSVG 要素を使用してを使用しています

前の例から同じSVG 要素を使用できますが、今回はHTML要素ではなくSVGグラフィックをマスクします。利點(diǎn)は、WebKitブラウザーや最新のIEなど、ブラウザのサポートがはるかに優(yōu)れていることです。

下のスニペットでは、SVG要素內(nèi)にマスクしたい畫像を配置し、CSSマスクプロパティを適用します。 CSS Maskプロパティは、前の例のように、

のIDを持つsvg 要素を參照しています。マスクされたSVGグラフィックのコードは次のとおりです

そして、これはCSSでのマスキング操作の世話をするスニペットです：

結(jié)果は前の例に非常に似ていますが、今回のみ、すべての主要なブラウザで表示できます。 Codepenデモをご覧ください：

.masked-element {
  mask-image: url(#mask1);
}

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

上記のスニペットは、SVGマスク內(nèi)に黒いSVGテキスト要素を追加し、CSSマスクプロパティを使用してライトブルーSVG楕円形に適用します。 楕円形の後ろにあるもの（この場(chǎng)合、ボディの背景畫像）がテキストを通して表示されます。結(jié)果は次のようになります：

で利用できます codepenのSitePoint（@SitePoint）によるペンSVGテキストマスクを參照してください。

マスクのアニメ

CSSトランジションとキーフレームアニメーションを使用して、マスクポジションとマスクサイズをアニメーション化できます。 以下は、星型のPNGマスク畫像の基本的なキーフレームアニメーションの例です。

ここに関連するコードスニペットがあります：

マスクされた要素はhtml タグ：

です

マスキング操作では、Shorthand Maskプロパティを使用しています

要素のAnimateクラスは、CSS変換とアニメーションを使用して星型の畫像に動(dòng)きを追加します：

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

ChromeのようなWebKitブラウザを起動(dòng)し、Codepenで次のライブデモをチェックしてください：

.masked-element {
  mask-image: url(#mask1);
}

CodepenでMaria Antonietta Perna（@antonietta）によるCSSマスクでアニメーション化されているペンを參照してください。

タグにマスキング効果を追加してから、CSSでアニメーション化できます。 ここにクイックCodepenデモがあります：アニメーションはブラウザで表示されますが、マスキングはFirefoxでのみレンダリングされます：

CodepenのSitePoint（@SitePoint）によってHTML要素のペンアニメーションSVGマスクを參照してください。

良いニュースは、インラインSVGグラフィックにSVGマスクを適用すると、ブラウザがすぐにスカイロケットをサポートすることです。 SVGのみを使用して同じアニメーションデモをチェックしてください：

CodepenのSitePoint（@SitePoint）によってSVG要素でSVGマスクをアニメーション化するペンを參照してください。

マスクプロパティのブラウザのサポート

この記事全體でブラウザのサポートの問題に觸れました。執(zhí)筆時(shí)點(diǎn)での狀況の単純な內(nèi)訳は、次のようになります：

CSS Maskプロパティを使用して、HTML要素のPNGまたは外部SVG畫像マスクWebKit-ベンダープレフィックスのみでWebKitブラウザで動(dòng)作します。 HTML要素のインラインSVGマスク要素は、Firefoxでのみサポートされています。 SVG要素のインラインSVGマスク要素は、WebKitブラウザーとFirefoxおよび最新のインターネットエクスプローラーでサポートされています。

Yokselのこの素晴らしいCodepenデモは、ブラウザのサポートに関する限り、最新技術(shù)の視覚的なイラストを提供します。

Alan GreenblattはGitHubリポジトリを利用可能にし、CSSグラフィック関連プロパティがどのブラウザによってサポートされているかについて詳しく説明します。

ブラウザのサポート互換性テーブルでは、Webサイトを使用することができます。

CSSマスクの現(xiàn)在のブラウザサポートはあまり良くありませんが、この機(jī)能をいくつかの裝飾要素の拡張として使用すると、サポートしていないブラウザのユーザーは見逃していることにさえ気付きません。

リソース

CSSマスキングモジュールレベル1 - W3Cエディターのドラフト

CSS-tricks

のCSSのクリッピングとマスキング

マスクイメージを使用したマスキングに関するCODROPS CSSリファレンス
• MDN
on
• svg Jakob Jenkov
による
• SVGマスク Dirk SchulzeによるCSSマスキング
• 共有したいWebへのクールなマスキング効果を知っていますか？コメントボックスを押して、私に知らせてください。
CSSおよびSVGマスキングに関するよくある質(zhì)問（FAQ）
CSSとSVGのマスキングの違いは何ですか？
• CSSとSVGマスキングは両方とも、要素の部分を非表示または明らかにすることができます。ただし、アプローチと能力が異なります。 CSSマスキングは、マスク畫像のアルファチャネルが要素の可視性を決定するマスク層として畫像を使用します。一方、SVGマスキングは、ベクトルグラフィックをマスクレイヤーとして使用します。これにより、マスクの形狀とサイズをより柔軟に制御できます。 SVGマスキングは、CSSマスキングでは不可能な色と勾配マスクもサポートします。 Web要素にユニークな視覚効果を追加します。 SVGを使用して勾配マスクを作成するには、マスク要素內(nèi)の線形勾配または放射狀勾配要素を定義する必要があります。勾配要素には、勾配に沿って異なるポイントで色と不透明度を定義する少なくとも2つのストップ要素が必要です。 SVGマスキングを一緒にマスキングして、複雑なマスキング効果を作成します。 CSSマスクを要素に適用してから、同じ要素にSVGマスクを適用できます。要素の最終的な可視性は、2つのマスクの組み合わせによって決定されます。

CSSマスクがインターネットエクスプローラーで機(jī)能しないのはなぜですか？ Internet Explorerをサポートする必要がある場(chǎng)合は、代わりにSVGマスキングを使用する必要があります。 SVGマスキングは、インターネットエクスプローラーを含むすべての主要なブラウザでサポートされています。 CSSマスキングの場(chǎng)合、CSSアニメーションまたはトランジションを使用してマスクイメージプロパティをアニメーション化できます。 SVGマスキングの場(chǎng)合、SVGアニメーションを使用してマスク要素をアニメーション化できます。

テキストをCSSまたはSVGを使用したマスクとして使用できますか？

はい、CSSとSVGの両方のマスクとしてテキストを使用できます。 CSSマスキングの場(chǎng)合、テキスト畫像をマスク畫像として使用できます。 SVGマスキングの場(chǎng)合、テキスト要素をマスク要素として使用できます。

CSSまたはSVGを使用した?jī)倚违蕙攻蜃鞒嗓筏?、CSSを使用して円形マスクを作成するにはどうすればよいですか。マスク畫像としての放射狀勾配関數(shù)。 SVGを備えた?jī)倚违蕙攻蜃鞒嗓工毪摔?、マスク要素として円エレメントを使用できます?/h3>

複數(shù)の形狀の複雑なマスクを作成して、複數(shù)の形狀の複雑なマスクを作成するにはどうすればよいですか、SVGマスキングを使用できます。 SVGマスキングにより、マスク要素として複數(shù)の形狀要素（rect、円、ポリゴンなど）を使用できます。これらの形狀を個(gè)別に配置してサイズして、複雑なマスクを作成できます。

CSSまたはSVGを使用したマスクとしてビデオを使用できますか？マスクイメージプロパティをビデオURLに設(shè)定することにより、ビデオをマスク畫像として使用できます。 svgマスキングはビデオマスクをサポートしません。

CSSマスキングの場(chǎng)合、CSSまたはSVGを使用したマスクの不透明度を調(diào)整するにはどうすればよいですか。マスクの不透明度は、のアルファチャネルによって決定されます。マスク畫像。マスク畫像を編集して、不透明度を調(diào)整できます。 SVGのマスキングの場(chǎng)合、マスクの不透明度は、マスク要素の充填障害およびストローク容量特性によって決定されます。これらのプロパティを変更することにより、不透明度を調(diào)整できます