CSS 및 SVG를 사용하여 브라우저에서 마스킹

마스킹은 나머지를 숨기면서 화면의 선택한 부분이나 이미지를 표시 할 수있는 기술입니다. 웹 개발자는 마스크 속성 및 SVG 마스크 요소를 통해 브라우저 에서이 기술을 사용할 수 있습니다. 이러한 기능은 어떤 종류의 이미지 편집 소프트웨어를 사용하지 않고도 브라우저의 이미지 및 기타 요소에 마스킹 효과를 표시 할 수 있습니다. 이 기사에서는 CSS 및 SVG 마스킹 기능을 실제로 표시하고 현재 브라우저 지원 문제에 대한 정보를 포함시켜야합니다. 작성 당시 대부분의 코드 샘플은 WebKit 브라우저에서만 작동하는 반면 SVG 기반 마스크는 더 넓은 브라우저 지원을 즐기는 것으로 보입니다. 따라서 예제를 사용해 보려면 Chrome과 같은 WebKit 브라우저를 사용하는 것이 좋습니다.

키 테이크 아웃

CSS 및 SVG에서의 마스킹은 CSS '마스크'속성 또는 SVG` 브라우저 지원은 다양합니다. CSS 마스크는 주로 WebKit 브라우저에서 지원되는 반면 SVG 마스크는 Firefox 및 Internet Explorer를 포함한 최신 브라우저에서 더 넓은 호환성을 가지고 있습니다. 마스크 속성`mask-image`,`마스크 모드`,`마스크-리피트 ','마스크 포지션 '및`마스크 크기'와 같은 마스크 속성 편의를 위해. 애니메이션 및 마스크로 텍스트 사용을 포함한 고급 마스킹 효과는 CSS 및 SVG를 통해 웹 디자인 유연성과 창의성 향상으로 달성 할 수 있습니다.

웹에서 마스킹 클리핑 또는 마스킹을 사용하여 웹에서 마스킹 효과를 얻을 수 있습니다.

클리핑은 이미지 나 요소 위에 원이나 다각형과 같은 닫힌 벡터 모양을 놓는 것과 관련이 있습니다. 모양 뒤에있는 이미지의 모든 부분이 보이고 모양의 경계 외부의 모든 부분은 숨겨집니다. 모양의 경계를 클립 경로라고하며 클립 경로 속성을 사용하여 생성합니다. 마스킹은 PNG 이미지, CSS 그라디언트 또는 SVG 요소를 사용하여 수행하여 페이지의 이미지 또는 기타 요소의 일부를 숨기려면 수행됩니다. CSS 마스크 속성을 사용하여이를 달성 할 수 있습니다 이 기사에서는 CSS 마스크 속성 및 SVG 요소로 마스킹에만 초점을 맞출 것입니다.

CSS 마스크 속성 마스크는 전체 개별 속성에 대한 CSS 속성 속성입니다. 그들 중 일부를 자세히 자세히 살펴 보겠습니다.

마스크-이미지 속성 마스크 이미지 속성을 사용하여 요소의 마스크 층 이미지를 설정할 수 있습니다.

값은 값을 전혀 설정하지 않는 것과 동일하지 않습니다. 반대로 - 그것은 여전히 ​​투명한 검은 색 이미지 레이어로 간주됩니다.

. 마스크 이미지를 URL 값으로 설정할 수 있습니다. 이것은 PNG 이미지 파일, SVG 파일 또는 SVG 요소에 대한 참조로가는 경로 일 수 있습니다. 쉼표로 분리 된 해당 수의 URL 값을 추가하여 둘 이상의 마스크 이미지 레이어를 설정할 수 있습니다. 다음은 몇 가지 예입니다

이것은 mask1

의 ID로 svg 요소를 참조하는 방법입니다.

그라디언트 이미지는 마스크 이미지 속성에도 적합한 값입니다.

마스크 모드 속성 마스크 모드를 사용하면 마스크 레이어 이미지를 알파 마스크 또는 휘도 마스크로 설정할 수 있습니다. 알파 마스크는 알파 채널이있는 이미지입니다. 자세히 알파 채널은 각 픽셀의 데이터에 포함 된 투명성 정보입니다. Alpha로 설정된 마스크 모드 속성으로 마스킹 작업은 이미지의 알파 값을 마스크 값으로 사용합니다.

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

알파 채널의 편리한 예는 검은 색과 투명 영역이있는 PNG 이미지입니다. 마스크 된 요소는 알파 값이 1 인 마스크 이미지의 검은 부분을 통해 표시됩니다. 알파 값이 0 인 투명 부분 아래의 다른 모든 것은 숨겨 질 것입니다.

이 PNG 이미지를 내 알파 마스크로 사용하겠습니다 : 아래 JPG 이미지에서 마스킹 작업을 수행하십시오.

이것은 마법이 일어나는 곳입니다 :

.masked-element {
  mask-image: url(#mask1);
}

그리고 여기 브라우저에서 결과가 어떻게 보이는지 :

홍합 마스크는 이미지의 휘도 값을 마스크 값으로 사용합니다. 위의 PNG 이미지와 같은 PNG 이미지 - 그러나 흰색으로는 휘도 마스크의 좋은 예입니다.

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

마스크의 흰색 픽셀로 덮여있는 마스크를 원하는 요소의 영역이 표시됩니다. 마스크의 투명 픽셀로 덮인 마스크 된 요소의 일부는 숨겨집니다.

마스크 모드 속성을 휘도로 설정하고 위의 이미지를 마스크로 사용하면 이전과 동일한 결과가 표시됩니다. 코드는 다음과 같습니다

마스크-반복 속성

Mask-Repeat는 배경 반복 속성과 거의 비슷합니다. 크기와 위치를 설정 한 후 마스크 레이어 이미지 타일링을 제어합니다.

<:> 가능한 값은 다음과 같습니다

반복 : 마스크 레이어 이미지는 사용 가능한 공간에서 반복되지 않습니다. <: :> 반복 -X : 마스크 레이어 이미지는 x 좌표를 따라 반복됩니다. 반복 Y : 마스크 레이어 이미지가 y 좌표 아래로 반복됩니다.

• 공간 : 마스크 층 이미지가 반복되어 사용 가능한 영역 전체에서 간격을두고 있습니다.
라운드 : 마스크 레이어 이미지는 사용 가능한 영역에서 전체 횟수를 반복합니다. 정수가 사용 가능한 공간에 맞지 않으면 이미지가 그렇게 될 때까지 스케일링됩니다.
예를 들어, 이것은 마스크로 사용하려는 이미지입니다.
• 아래 코드 스 니펫은 마스크 반복 속성을 공간 값으로 설정합니다.
다음 마스킹 효과가 발생합니다
• 마스크 위치 속성 마스크 위치 특성을 사용하여 마스크 레이어 이미지를 배치 할 수 있습니다. 이 속성을보다 친숙한 CSS 배경 이미지 속성에 사용하는 것과 동일한 값으로 설정할 수 있습니다. 초기 값은 중심입니다.
예를 들어 뷰포트의 왼쪽 상단에 마스크 이미지 레이어를 놓으려면 마스크 위치 속성을
• 0 0
:

의 값으로 설정하십시오.

이것은 위의 코드가 브라우저에서 보이는 것입니다.

위의 마스크 위치 특성의 값을 100% 100%

로 변경하면 뷰포트 오른쪽 하단에 마스크 레이어 이미지가 표시됩니다.

마스크 크기의 속성 마스크 크기 속성을 사용하여 마스크 레이어 이미지의 크기를 빠르게 설정할 수 있습니다. 마스크 크기 속성을 사용하여 더 친숙한 CSS 배경 크기 속성과 동일한 값을 수용합니다. 예를 들어, 마스크 크기를 50%로 설정하면 마스크 층 이미지가 전체 너비의 50%로 표시됩니다.

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

가 포함하도록 마스크 크기를 설정하면 마스크 레이어 이미지를 가장 큰 크기로 스케일링하여 너비와 높이가 마스크 포지셔닝 영역 내부에 들어갈 수 있습니다.

이 데모가 아래의 코드펜에서 실시간으로 살아남는 것을 볼 수 있습니다 :

Codepen에서 Sitepoint (@SitePoint)의 펜 CSS 마스크 예제 참조. 마스크 레이어를 구성 위에서 설명한대로 마스크 이미지 특성의 각 값을 쉼표로 분리하여 동일한 요소에 두 개 이상의 마스크 레이어를 사용할 수 있습니다. 레이어는 다른 층이 화면에 먼저 표시되면서 다른 레이어 위에 쌓입니다.

예를 들어

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

위의 스 니펫에서

mask22.png 는 mask1.png 가 겹쳐집니다. 마스크 복합 속성을 사용하면 다음 키워드의 값에 따라 다른 마스크 레이어를 결합 할 수 있습니다. 추가 : mask2.png 는 mask1.png 위에 페인트됩니다 suptract : mask1.png 를 겹치지 않는

mask2.png 의 일부를 표시합니다. 브라우저는 아직 표준 키워드를 지원하지 않으므로 적어도 당분간 해당 합성 운영자 키워드 소스 아웃을 사용해야합니다. <: :> 교차 : mask1.png 의 겹침 부분을 표시합니다. 그러나 CSS 마스크를 지원하는 유일한 브라우저 인 WebKit 브라우저는 비표준 복합 소스 인 키워드를 사용하는 경우에도 화면에 아무것도 표시되지 않는 것 같습니다. 제외 : mask1.png 및 mask2.png 의 일부를 겹치지 않는 부분을 표시합니다. 다시 한번, 표준 키워드에는 아직 지원이 없기 때문에 복합 연산자 XOR을 사용하는 것이 훨씬 좋습니다.
• 아래 코드 펜 데모에서 라이브 데모를 확인할 수 있습니다. Codepen에서 sitepoint (@sitepoint)별로 펜 CSS 마스크를 참조하십시오. 마스크 속성 속성 당신은 마스크를 사용하여 한 번에 CSS 마스킹 작업을 제어하는 ​​모든 속성을 설정할 수 있습니다. 다음은 풀 마스크 속기입니다 마스크-오리진 및 마스크 클립 작업보다 친숙한 배경 오리핀 및 배경 클립 특성과 같은 작업. 마스크 속의 속성에서 속성을 재정렬 할 수 있지만 마스크 포지션 속성 후에는 "/"기호로 분리 된 마스크 크기 속성을 설정해야합니다. 또한 마스크 속도를 설정하지 않고 마스크 크기를 설정하면 잘못된 선언이 발생합니다. 마지막으로, 마스크 속성에 지정하지 못하는 값은 초기 기본값으로 다시 설정되므로 마스크를 사용하여 개별 속성을 재설정해야 할 때 마스크를 사용하여 실제로 편리합니다. SVG 마스크 요소 확장 가능한 벡터 그래픽 또는 SVG는 그래픽을 표시하는 XML 기반 언어입니다. SVG 문서 내부의 요소를 사용하여 HTML 요소 및 기타 SVG 그래픽에 마스킹 효과를 추가 할 수 있습니다. SVG로 할 수있는 멋진 일은 텍스트를 사용하여 페이지의 다른 요소를 마스킹하는 것입니다. 이러한 각 가능성을 자세히 살펴 보겠습니다 HTML 요소에서 svg 요소를 사용하여 작성 시점에서 인라인 SVG 그래픽 내부의 요소를 사용하여 HTML 요소를 마스킹하면 Firefox 브라우저에서만 작동합니다. 예는 다음과 같습니다.

다음 CSS와 함께

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

위의 코드에 는 mask1 의 id가있는 요소를 포함 시켰습니다. 마스크 내부에는 grad 의 ID와 그라디언트를 채우기 색상으로 사용하는 원 모양으로 흑백 그라디언트를 배치했습니다. 마지막으로 CSS 마스크 속성에서 SVG 요소의 ID 값을 참조했습니다. 이것은 마스킹 효과를 페이지의 이미지에 적용합니다. 페이지 배경과 마스크 이미지에 대한 몇 가지 다른 스타일 선언을 추가하면 아래의 것과 같이 매우 극적인 효과를 얻을 수 있습니다. 그라디언트의 흰색 음영으로 채워진 원 마스크의 부분이 마스크 된 이미지를 보여줄 수있는 방법에 주목하십시오. 반대로, 그라디언트의 검은 색 색조로 채워진 부분은 마스크 된 이미지를 숨 깁니다.

Codepen 에서이 라이브 데모가 있습니다 (Firefox에서만 작동합니다!)

. . Codepen에서 sitepoint (@sitepoint)에 의해 인라인 svg 마스크 요소가있는 펜 마스킹을 참조하십시오.

SVG 그래픽에서 svg 요소를 사용하는 이전 예제에서 동일한 SVG 요소를 사용할 수 있지만 이번에는 HTML 요소가 아닌 SVG 그래픽을 마스킹합니다. 장점은 WebKit 브라우저와 최신 IE를 포함하여 브라우저 지원이 훨씬 향상된다는 것입니다. 아래 스 니펫에서는 SVG 요소 안에 마스크를 마스킹하고 CSS 마스크 속성을 적용하려는 이미지를 배치하겠습니다. CSS 마스크 속성은 이전 예제와 마찬가지로

의 ID와 참조합니다. 마스킹 된 SVG 그래픽의 코드는 다음과 같습니다

그리고 이것은 CSS에서 마스킹 작업을 처리하는 스 니펫입니다.

결과는 이전 예제와 거의 비슷합니다. 이번에는 모든 주요 브라우저에서 볼 수 있습니다. Codepen 데모를 살펴보십시오 Codepen의 sitepoint (@sitepoint)에 의해 svg 요소의 펜 SVG 마스크를 참조하십시오. SVG 텍스트로 마스킹 SVG 마스크 내부의 텍스트 요소를 사용하여 마스킹 작업을 수행 할 수 있습니다. 위의 스 니펫은 SVG 마스크 내부에 검은 색 SVG 텍스트 요소를 추가하고 CSS 마스크 속성을 사용하여 연한 파란색 SVG 타원 모양에 적용합니다. 타원 모양 뒤에있는 것이 무엇이든간에 (이 경우 신체의 배경 이미지)는 텍스트를 통해 표시됩니다. 결과는 다음과 같이 보입니다 :

전체 코드는 CodePen : 에서 사용할 수 있습니다 Codepen에서 sitepoint (@sitepoint)의 펜 SVG 텍스트 마스크를 참조하십시오.

애니메이션 마스크 CSS 전환 및 키 프레임 애니메이션을 사용하여 마스크 위치 및 마스크 크기를 애니메이션 할 수 있습니다. 아래는 별 모양의 PNG 마스크 이미지의 기본 키 프레임 애니메이션 예제입니다. 여기에는 관련 코드 스 니펫이 있습니다 마스크 된 요소는 html 태그 : 입니다

마스킹 작업은 속성 마스크 속성을 사용합니다

요소의 애니메이션 클래스는 CSS 변환 및 애니메이션을 사용하여 별 모양의 이미지에 움직임을 추가합니다.

Chrome과 같은 WebKit 브라우저를 시작하고 Codepen에서 다음 라이브 데모를 확인하십시오 : Codepen에서 Maria Antonietta Perna (@antonietta)의 CSS 마스크로 애니메이션을 참조하십시오.

CSS로 SVG 마스크 요소를 애니메이션하는 것 SVG 요소를 사용하여 태그에 마스킹 효과를 추가 한 다음 CSS로 애니메이션 할 수 있습니다. 여기에 빠른 코드펜 데모가 있습니다 : 애니메이션은 모든 브라우저에서 볼 수 있지만 마스킹은 Firefox에서만 렌더링됩니다 :

. Codepen에서 sitepoint (@SitePoint)에 의해 HTML 요소의 펜 애니메이션 SVG 마스크를 참조하십시오.

좋은 소식은 인라인 SVG 그래픽에 SVG 마스크를 적용하면 브라우저가 즉시 스카이 로켓을 지원한다는 것입니다. svg : 만 사용하여 동일한 애니메이션 데모를 확인하십시오 Codepen에서 sitepoint (@sitepoint)에 의해 svg 요소의 펜 애니메이션 SVG 마스크를 참조하십시오.

마스크 속성에 대한 브라우저 지원 나는이 기사에서 브라우저 지원 문제를 다루었 다. 글을 쓰는 시점의 상황에 대한 간단한 고장은 다음과 같습니다.

PNG 또는 외부 SVG 이미지 마스크. HTML 요소의 인라인 SVG 마스크 요소는 Firefox에서만 지원됩니다.

SVG 요소의 인라인 SVG 마스크 요소는 WebKit 브라우저와 Firefox 및 최신 Internet Explorer에서 지원됩니다.

요크 셀 의이 위대한 코드 펜 데모는 브라우저 지원이 진행되는 한 최신 기술을 시각적으로 보여줍니다. Alan Greenblatt는 Github 저장소를 제공하여 어떤 CSS 그래픽 관련 속성이 어떤 브라우저에 의해 지원되는지에 대한 세부 사항에 들어갑니다. 캔의 브라우저 지원 호환성 테이블은 웹 사이트에서 더 많은 세부 정보와 더 많은 리소스 링크를 제공합니다. CSS 마스크에 대한 현재 브라우저 지원이 좋지는 않지만이 기능을 몇 가지 장식 요소에 대한 향상으로 사용하면 지원하지 않는 브라우저 사용자가 누락 된 것을 알지 못합니다.

마지막으로 SVG 요소를 사용하여 SVG 그래픽에 마스킹 효과를 적용하면 최신 브라우저에서 가장 넓은 지원을 받고 웹에서 멋지게 보입니다.

자원

CSS 마스킹 모듈 레벨 1 - W3C 편집기 초안 CSS- 트릭에서 CSS의 클리핑 및 마스킹 Codrops CSS Mask-Image 가있는 마스킹에 대한 참조 svg 에서 mdn Jakob Jenkov의 svg 마스크 Dirk Schulze에 의한 CSS 마스킹

공유하고 싶은 웹에서 멋진 마스킹 효과를 알고 있습니까? 댓글 상자를 누르고 알려주세요.

CSS 및 SVG 마스킹에 대한 질문 (FAQS)은 자주 묻는 질문 (FAQ) 입니다 CSS와 SVG 마스킹의 차이점은 무엇입니까?

CSS와 SVG 마스킹은 모두 요소의 일부를 숨기거나 드러낼 수 있도록합니다. 그러나 그들은 그들의 접근과 능력이 다릅니다. CSS 마스킹은 이미지를 마스크 층으로 사용하여 마스크 이미지의 알파 채널이 요소의 가시성을 결정합니다. 반면, SVG 마스킹은 벡터 그래픽을 마스크 층으로 사용하여 마스크의 모양과 크기에 대한 유연성과 제어를 제공합니다. SVG 마스킹은 또한 CSS 마스킹으로 불가능한 색상 및 그라디언트 마스크를 지원합니다.

SVG로 구배 마스크를 만들 수 있습니까?

SVG 마스킹은 그라디언트 마스크를 만들 수 있습니다. 웹 요소에 독특한 시각적 효과를 추가하십시오. SVG로 그라디언트 마스크를 만들려면 마스크 요소 내부에서 선형 그라데이션 또는 방사형 그레이드 요소를 정의해야합니다. 그라디언트 요소에는 그라디언트를 따라 다른 지점에서 색상과 불투명도를 정의하는 두 개의 정지 요소가 있어야합니다.

CSS와 SVG 마스킹을 함께 사용할 수 있습니까?

예, CSS를 사용할 수 있습니다. SVG 마스킹을 함께하여 복잡한 마스킹 효과를 만듭니다. CSS 마스크를 요소에 적용한 다음 SVG 마스크를 동일한 요소에 적용 할 수 있습니다. 요소의 최종 가시성은 두 마스크의 조합에 의해 결정됩니다.

왜 내 CSS 마스크가 인터넷 익스플로러에서 작동하지 않습니까?

CSS 마스킹은 인터넷 익스플로러에서 지원되지 않습니다. Internet Explorer를 지원 해야하는 경우 대신 SVG 마스킹을 사용해야합니다. SVG 마스킹은 Internet Explorer를 포함한 모든 주요 브라우저에서 지원됩니다.

CSS 또는 SVG로 마스크를 애니메이션 할 수 있습니까?

CSS 및 SVG 마스킹 지원 애니메이션 모두 CSS 마스킹의 경우 CSS 애니메이션 또는 전환을 사용하여 마스크 이미지 속성을 애니메이션 할 수 있습니다. SVG 마스킹의 경우 SVG 애니메이션을 사용하여 마스크 요소를 애니메이션 할 수 있습니다. CSS 또는 SVG가있는 마스크로 텍스트를 사용할 수 있습니까?

예, CSS와 SVG가있는 마스크로 텍스트를 사용할 수 있습니다. CSS 마스킹의 경우 텍스트 이미지를 마스크 이미지로 사용할 수 있습니다. SVG 마스킹의 경우 텍스트 요소를 마스크 요소로 사용할 수 있습니다.

CSS 또는 SVG를 사용하여 원형 마스크를 만들 수 있습니까?

CSS로 원형 마스크를 만들려면 어떻게 사용할 수 있습니다. 마스크 이미지로서 방사형 등급 기능. SVG로 원형 마스크를 만들려면 원소 요소를 마스크 요소로 사용할 수 있습니다.

여러 모양으로 복잡한 마스크를 만들 수 있습니까?

여러 모양으로 복잡한 마스크를 만들려면 어떻게해야합니까? , SVG 마스킹을 사용할 수 있습니다. SVG 마스킹을 사용하면 마스크 요소로 여러 모양 요소 (RECT, Circle, Polygon 등)를 사용할 수 있습니다. 복잡한 마스크를 만들기 위해 이러한 모양을 독립적으로 위치와 크기로 만들 수 있습니다.

비디오를 CSS 또는 SVG가있는 마스크로 사용할 수 있습니까? CSS 마스킹은 비디오 마스크를 지원합니다. 마스크 이미지 속성을 비디오 URL로 설정하여 비디오를 마스크 이미지로 사용할 수 있습니다. SVG 마스킹은 비디오 마스크를 지원하지 않습니다.

CSS 또는 SVG로 마스크의 불투명도를 조정하려면 CSS 마스킹의 경우 마스크의 불투명도는 알파 채널에 의해 결정됩니다. 마스크 이미지. 마스크 이미지를 편집하여 불투명도를 조정할 수 있습니다. SVG 마스킹의 경우, 마스크의 불투명도는 마스크 요소의 충전 기능 및 스트로크-능력 특성에 의해 결정됩니다. 이러한 특성을 변경하여 불투명도를 조정할 수 있습니다

위 내용은 CSS 및 SVG를 사용하여 브라우저에서 마스킹의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!