CSSクリッピングとマスキング
構文
- クリッピング
- clip-path：<クリップ元> | [<基本形状> || <clip-geometry-box>] |無し
- マスキング
- マスク画像：[なし| <マスクリファレンス>]＃
- マスクモード：[<mask-mode>]＃
- マスクリピート：[<repeat-style]＃
- マスク位置：[<position>]＃
- マスククリップ：[<ジオメトリボックス> |クリップなし]＃
- マスク原点：[<geometry-box>]＃
- マスクサイズ：[<bg-size>]＃
- マスク合成：[<compositing-operator>]＃
- mask：[<mask-reference> <masking-mode>？ || <position> [/ <bg-size>]？ || <リピートスタイル> || <ジオメトリボックス> || [<ジオメトリボックス> |クリップなし] || <compositing-operator>]＃
パラメーター
| パラメータ | 詳細 |
|---|---|
| クリップソース | インラインSVG要素（または）クリップパスの定義を含む外部ファイル内のSVG要素を指すURL。 |
| 基本形状 | inset() 、 circle() 、 ellipse()またはpolygon()いずれかをpolygon()ます。これらの関数の1つを使用して、クリッピングパスが定義されます。これらのシェイプ関数は、 浮動小数点型のシェイプとまったく同じように機能します |
| クリップジオメトリボックス | これは、 content-box 、 padding-box 、 border-box 、 margin-box 、 fill-box 、 stroke-box 、 view-boxを値として持つことができます。 <basic-shape>に値を指定せずにこれを指定すると、対応するボックスの端がクリッピングのパスとして使用されます。 <basic-shape>とともに使用すると、これはシェイプの参照ボックスとして機能します。 |
| マスク参照 | これは、マスクイメージソースへの参照URLまたはイメージでなくてnone 。 |
| リピートスタイル | これは、X軸とY軸でマスクをどのように繰り返すかタイルするかを指定します。サポートされている値は、 repeat-x 、 repeat-y 、 repeat 、 space 、 round 、 no-repeatです。 |
| マスクモード | alphaまたはluminanceまたはautoことができ、マスクをアルファマスクまたはルミナンスマスクとして扱うべきかどうかを示します。値が指定されておらず、マスク参照がダイレクト・イメージの場合、アルファ・マスク（または）と見なされます。マスク参照がURLの場合はルミナンス・マスクと見なされます。 |
| ポジション | これは、各マスクレイヤーの位置を指定し、 background-positionプロパティーと動作が似ています。値は、1つの値構文（ top 、 10% ）または2値構文（ top right 、 50% 50% ）で指定できます。 |
| ジオメトリボックス | プロパティに応じて、 マスクをクリッピングするボックス（ マスク塗りつぶし領域 ）またはマスクの原点（ マスク位置決め領域 ）の参照として使用するボックスを指定します。可能な値のリストは、 content-box 、 padding-box 、 border-box 、 margin-box 、 fill-box 、 stroke-box 、 view-boxです。これらの各値がどのように機能するかについての詳細な説明は、 W3C仕様書に記載されています。 |
| bg-size | これは各マスク画像レイヤーのサイズを表し、 background-sizeと同じ構文を持っています。値は、長さまたはパーセンテージ、またはautoまたはcoverまたはcontainsです。長さ、パーセンテージ、および自動は、単一の値として、または各軸の1つとして提供することができます。 |
| 合成オペレータ | これは、レイヤーごとのadd 、 subtract 、 exclude 、 multiplyうちのいずれか1つで、このレイヤーで使用する合成操作のタイプをそのレイヤーで定義します。各値の詳細については、 W3Cの仕様書を参照してください 。 |
備考
CSSのクリッピングとマスキングは非常に新しいコンセプトなので、これらのプロパティのブラウザサポートはかなり低いです。
マスク：
執筆時点（7月16日）のように、Chrome、Safari、Operaはこれらのプロパティを-webkit-接頭辞でサポートして-webkit-ます。
Firefoxは接頭辞を必要としませんが、SVG mask要素で使用する場合にのみマスクをサポートします。インラインSVG mask要素の場合、構文はmask: url(#msk)一方、外部SVGファイルのmask要素を使用する場合、構文はmask: url('yourfilepath/yourfilename.svg#msk')です。両方の場合の#mskは、参照されているmask要素のidを参照します。 この回答に示されているように、現在のところ、Firefoxではmaskプロパティのmask mask-reference以外のパラメータはサポートされていません。
Internet Explorer（およびEdge）はまだこのプロパティをサポートしていません。
mask-modeプロパティは現在、接頭辞付きまたは接頭辞なしのブラウザではサポートされていません。
クリップパス：
現時点（7月16日）のChrome（Safari、Opera）では、基本的なシェイプ（ circle 、 polygon ）またはインラインSVGのurl(#clipper)構文を使用してパスを作成するときに、 clip-pathサポートしていclip-path 。外部SVGファイルの一部であるシェイプに基づいてクリッピングをサポートしていません。また、 -webkit接頭辞が必要です。
Firefoxはclip-pathのurl()構文のみをサポートしていclip-path 、Internet Explorer（およびEdge）はサポートしていません。
