Looking for css Answers? Try Ask4KnowledgeBase
Looking for css Keywords? Try Ask4Keywords

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-boxpadding-boxborder-boxmargin-boxfill-boxstroke-boxview-boxを値として持つことができます。 <basic-shape>に値を指定せずにこれを指定すると、対応するボックスの端がクリッピングのパスとして使用されます。 <basic-shape>とともに使用すると、これはシェイプの参照ボックスとして機能します。
マスク参照これは、マスクイメージソースへの参照URLまたはイメージでなくてnone
リピートスタイルこれは、X軸とY軸でマスクをどのように繰り返すかタイルするかを指定します。サポートされている値は、 repeat-xrepeat-yrepeatspaceroundno-repeatです。
マスクモード alphaまたはluminanceまたはautoことができ、マスクをアルファマスクまたはルミナンスマスクとして扱うべきかどうかを示します。値が指定されておらず、マスク参照がダイレクト・イメージの場合、アルファ・マスク(または)と見なされます。マスク参照がURLの場合はルミナンス・マスクと見なされます。
ポジションこれは、各マスクレイヤーの位置を指定し、 background-positionプロパティーと動作が似ています。値は、1つの値構文( top10% )または2値構文( top right50% 50% )で指定できます。
ジオメトリボックスプロパティに応じて、 マスクをクリッピングするボックス( マスク塗りつぶし領域 )またはマスクの原点( マスク位置決め領域 )の参照として使用するボックスを指定します。可能な値のリストは、 content-boxpadding-boxborder-boxmargin-boxfill-boxstroke-boxview-boxです。これらの各値がどのように機能するかについての詳細な説明は、 W3C仕様書に記載されています。
bg-size これは各マスク画像レイヤーのサイズを表し、 background-sizeと同じ構文を持っています。値は、長さまたはパーセンテージ、またはautoまたはcoverまたはcontainsです。長さ、パーセンテージ、および自動は、単一の値として、または各軸の1つとして提供することができます。
合成オペレータこれは、レイヤーごとのaddsubtractexcludemultiplyうちのいずれか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)では、基本的なシェイプ( circlepolygon )またはインラインSVGのurl(#clipper)構文を使用してパスを作成するときに、 clip-pathサポートしていclip-path 。外部SVGファイルの一部であるシェイプに基づいてクリッピングをサポートしていません。また、 -webkit接頭辞が必要です。

Firefoxはclip-pathurl()構文のみをサポートしていclip-path 、Internet Explorer(およびEdge)はサポートしていません。

クリッピングとマスキング 関連する例