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>]＃

パラメーター

備考

クリッピング（ポリゴン）

CSS：

div{
  width:200px;
  height:200px;
  background:teal;
  clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */
}

HTML：

<div></div>

上記の例では、四角形（200×200）の要素を三角形にクリップするために多角形のクリッピングパスが使用されています。出力シェイプは三角形です。パスが始まる（つまり、最初の座標は0 0 - ボックスの左上隅を0 100%にし0 100%これはボックスの左下隅です。最終的に100% 50%になります。これはボックスの右中点だけです。これらのパスは自己終了します（つまり、開始点が終了点になります）。最終的な形状は三角形の形状になります。

これは、画像またはグラデーションを持つ要素で背景として使用することもできます。

ビューの例

出力：

クリッピング（サークル）

CSS：

div{
  width: 200px;
  height: 200px;
  background: teal;
  clip-path: circle(30% at 50% 50%); /* refer remarks before usage */
}

HTML

<div></div>

この例は、divを円にクリップする方法を示しています。要素は、基準ボックスの中心に中心点を持つ基準ボックスの寸法に基づいて半径が30％の円にクリップされます。ここでは、<clip-geometry-box>（つまり、参照ボックス）が提供されないため、要素のborder-boxが参照ボックスとして使用されます。

円の形状は半径と(x,y)座標の中心を持つ必要があります：

circle(radius at x y)

ビューの例

出力：

クリッピングとマスキング：概要と相違点

クリッピングとマスキングでは、要素の特定の部分を透明または不透明にすることができます。どちらもHTML要素に適用できます。

クリッピング

クリップはベクトルパスです。このパスの外側では、要素は透明になり、内部は不透明になります。したがって、要素にclip-pathプロパティを定義することができます。 SVGにも存在するすべてのグラフィカル要素は、ここでパスを定義する関数として使用できます。例はcircle() 、 polygon()またはellipse()です。

clip-path: circle(100px at center);

要素は、要素の中心に配置され、半径が100ピクセルの円の内側にのみ表示されます。

マスキング

マスクはクリップと似ていますが、パスを定義するのではなく、要素の上にどのレイヤーをマスクするかを定義します。このマスクは、主に2つの色（黒と白）からなる画像として想像することができます。

ルミナンスマスク ：黒は領域が不透明で白が透明であることを意味しますが、半透明な灰色の領域もあり、スムーズなトランジションが可能です。

Alpha Mask ： マスクの透過領域でのみ要素が不透明になります。

この画像は、例えば輝度マスクとして使用して、要素を右から左へ、および不透明から透明に非常にスムーズに移行させることができます。

maskプロパティを使用すると、マスクタイプとレイヤーとして使用されるイメージを指定できます。

mask: url(masks.svg#rectangle) luminance;

masks.svg定義されているrectangle要素は、要素のルミナンスマスクとして使用されます。

イメージを透明から透明にフェードする単純なマスク

CSS

div {
  height: 200px;
  width: 200px;
  background: url(http://lorempixel.com/200/200/nature/1);
  mask-image: linear-gradient(to right, white, transparent); 
}

HTML

<div></div>

上記の例では、背景としてイメージを持つ要素があります。イメージに適用されたマスク（CSSを使用）は、左から右にフェードアウトしているかのように見えます。

マスキングは、白（左）から透明（右）をマスクとするlinear-gradientを使用することによって実現されます。これはアルファマスクなので、マスクが透明な場所では画像は透明になります。

マスクなしの出力：

マスク付き出力：

注：備考で述べたように、上記の例は、 -webkit接頭辞を付けて使用した場合にのみChrome、Safari、Operaで-webkitます。この例（ linear-gradientマスク画像）は、Firefoxではまだサポートされていません。

マスクを使用して画像の中央の穴をカットする

CSS

div {
  width: 200px;
  height: 200px;
  background: url(http://lorempixel.com/200/200/abstract/6);
  mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */
}

HTML

上記の例では、 radial-gradientを使用して中心に透明円を作成し、これをマスクとして使用して、画像の中心から切り取られた円の効果を生成します。

マスクなしの画像：

マスク付き画像：

マスクを使用して不規則な形状の画像を作成する

CSS

div { /* check remarks before usage */
  height: 200px;
  width: 400px;
  background-image: url(http://lorempixel.com/400/200/nature/4);
  mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
  mask-size: 75% 25%, 25% 25%, 100% 75%;
  mask-position: bottom left, bottom right, top left;
  mask-repeat: no-repeat;
}

HTML

<div></div>

上記の例では、3つのlinear-gradient画像（適切な位置に置かれたときにコンテナのサイズの100％x 100％をカバーする）がマスクとして使用され、画像の下部に透明な三角形のカットが生成されます。

マスクなしの画像：

マスク付き画像：