CSS
클리핑 및 마스킹

통사론

• 깎는
• clip-path : <클립 소스> | [<기본 모양> || <clip-geometry-box>] | 없음
• 마스킹
• 마스크 - 이미지 : [none | <마스크 참조>] #
• 마스크 모드 : [<mask-mode>] #
• 마스크 반복 : [<반복 스타일] #
• 마스크 위치 : [<position>] #
• 마스크 클립 : [<geometry-box> | 클립 없음] #
• 마스크 출처 : [<geometry-box>] #
• 마스크 크기 : [<bg-size>] #
• 마스크 합성 : [<compositing-operator>] #
• 마스크 : [<마스크 참조> <마스킹 모드>? || <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>

위의 예에서 사각형 (200x200) 요소를 삼각형 모양으로 자르기 위해 다각형 클리핑 패스가 사용됩니다. 출력 셰이프는 삼각형입니다. 경로가 시작될 때 (즉, 첫 번째 좌표가 0 0 ) 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);

요소는 요소의 가운데에 위치하며 반지름이 100px 인이 원 내부에서만 볼 수 있습니다.

마스킹

마스크는 클립과 유사하지만 패스를 정의하는 대신 요소 위에 어떤 레이어의 마스크를 정의합니다. 이 마스크를 주로 두 가지 색상, 즉 흑백으로 구성된 이미지로 상상할 수 있습니다.

Luminance Mask : 검정은 영역이 불투명하고 흰색이 투명 함을 의미하지만 반투명 인 회색 영역도 있으므로 부드러운 전환을 할 수 있습니다.

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에서 작동합니다. 이 예 ( 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 %를 차지함)가 마스크로 사용되어 이미지의 하단에 투명 삼각형 모양의 컷을 생성합니다.

마스크가없는 이미지 :

마스크가있는 이미지 :