수색…


통사론

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

매개 변수

매개 변수 세부
클립 소스 인라인 SVG 요소 (또는) 클립 경로 정의가 포함 된 외부 파일의 SVG 요소를 가리킬 수있는 URL입니다.
기본 모양 inset() , circle() , ellipse() 또는 polygon() 중 하나를 참조합니다. 이러한 함수 중 하나를 사용하여 클리핑 경로가 정의됩니다. 이 도형 함수는 도형 for Floats 에서와 동일한 방식으로 작동합니다.
클립 - 기하학 - 상자 이것은 content-box , padding-box , border-box , margin-box , fill-box , stroke-boxview-box 하나를 값으로 가질 수 있습니다. <basic-shape>에 아무 값도 지정하지 않으면 해당 상자의 모서리가 클리핑 경로로 사용됩니다. <기본 모양>과 함께 사용하면 모양의 참조 상자 역할을합니다.
마스크 참조 이있을 수 none 또는 이미지 또는 마스크 이미지 소스에 기준 URL.
반복 스타일 마스크를 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 크기 이것은 각 마스크 이미지 레이어의 크기를 나타내며 background-size 와 동일한 구문을가 background-size . 값은 길이 또는 백분율 또는 자동 또는 표지 또는 포함이 될 수 있습니다. 길이, 백분율 및 자동은 단일 값 또는 각 축에 하나씩 제공 될 수 있습니다.
합성 연산자 이 중 어느 하나가 될 수 있습니다 add , subtract , exclude , multiply 레이어 당과 그 아래 사람들과이 계층에 대해 사용되어야 합성 조작의 유형을 정의합니다. 각 값에 대한 자세한 설명은 W3C 사양 에서 사용할 수 있습니다.

비고

CSS 클리핑 및 마스킹 은 매우 새로운 개념이므로 이러한 속성에 대한 브라우저 지원은 매우 낮습니다.

마스크 :

서면 (7 월 '16) 당시와 마찬가지로 Chrome, Safari 및 Opera는 -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 ) 또는 url(#clipper) 구문을 사용하여 경로가 인라인 SVG로 작성 될 때 clip-path 지원합니다. 외부 SVG 파일의 일부인 모양을 기반으로하는 클리핑을 지원하지 않습니다. 또한 -webkit 접두어가 있어야합니다.

Firefox는 clip-pathurl() 구문 만 지원하지만 Internet Explorer (및 Edge)는 지원하지 않습니다.

클리핑 (다각형)

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)

보기보기

산출:

CSS 클립 경로가있는 원

클리핑 및 마스킹 : 개요 및 차이점

클리핑마스킹 을 사용하면 요소의 특정 부분을 투명하거나 불투명하게 만들 수 있습니다. 둘 다 모든 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 %를 차지함)가 마스크로 사용되어 이미지의 하단에 투명 삼각형 모양의 컷을 생성합니다.

마스크가없는 이미지 :

여기에 이미지 설명을 입력하십시오.

마스크가있는 이미지 :

여기에 이미지 설명을 입력하십시오.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow