CSS 및 SVG에서의 마스킹은 CSS '마스크'속성 또는 SVG` 브라우저 지원은 다양합니다. CSS 마스크는 주로 WebKit 브라우저에서 지원되는 반면 SVG 마스크는 Firefox 및 Internet Explorer를 포함한 최신 브라우저에서 더 넓은 호환성을 가지고 있습니다.
. 마스크 이미지를 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 인 투명 부분 아래의 다른 모든 것은 숨겨 질 것입니다.
이것은 마법이 일어나는 곳입니다 :
.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 마스크 속성은 이전 예제와 마찬가지로
/* 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);
}
.masked-element {
mask-image: url(#mask1);
}
.masked-element {
mask-image: linear-gradient(black 0%, transparent 100%);
}
마스크 모드 속성을 휘도로 설정하고 위의 이미지를 마스크로 사용하면 이전과 동일한 결과가 표시됩니다.
코드는 다음과 같습니다
Mask-Repeat는 배경 반복 속성과 거의 비슷합니다. 크기와 위치를 설정 한 후 마스크 레이어 이미지 타일링을 제어합니다.
<:> 가능한 값은 다음과 같습니다
-
공간 : 마스크 층 이미지가 반복되어 사용 가능한 영역 전체에서 간격을두고 있습니다. - 예를 들어, 이것은 마스크로 사용하려는 이미지입니다.
-
아래 코드 스 니펫은 마스크 반복 속성을 공간 값으로 설정합니다. -
마스크 위치 속성 마스크 위치 특성을 사용하여 마스크 레이어 이미지를 배치 할 수 있습니다. 이 속성을보다 친숙한 CSS 배경 이미지 속성에 사용하는 것과 동일한 값으로 설정할 수 있습니다. 초기 값은 중심입니다.
예를 들어 - 0 0 :
반복 : 마스크 레이어 이미지는 사용 가능한 공간에서 반복되지 않습니다.
<: :> 반복 -X : 마스크 레이어 이미지는 x 좌표를 따라 반복됩니다.
100% 100% 로 변경하면 뷰포트 오른쪽 하단에 마스크 레이어 이미지가 표시됩니다.
마스크 크기의 속성/* 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);
}
예를 들어 /* 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 의 겹침 부분을 표시합니다. 그러나 CSS 마스크를 지원하는 유일한 브라우저 인 WebKit 브라우저는 비표준 복합 소스 인 키워드를 사용하는 경우에도 화면에 아무것도 표시되지 않는 것 같습니다.
/* 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);
}
위의 코드에
SVG 그래픽에서 svg 
위 내용은 CSS 및 SVG를 사용하여 브라우저에서 마스킹의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
Flexbox vs Grid : 둘 다 배워야합니까?May 10, 2025 am 12:01 AM예, YoushouldLearnbothflexBoxAndgrid.1) FlexBoxisIdealforone-Dimensional, FlexiblelayoutSlikenavigationMenus.2) GridexCelsIntwo-Dimensional, ComplexDesignsSuchasmagazinElayouts.3) 결합 된 BothenSlayoutFlexibility 및 HeartingFortructur
궤도 역학 (또는 CSS 키 프레임 애니메이션을 최적화하는 방법)May 09, 2025 am 09:57 AM자신의 코드를 리팩터링하는 것은 어떤 모습입니까? John Rhea는 자신이 쓴 오래된 CSS 애니메이션을 선택하고 최적화하는 사고 과정을 살펴 봅니다.
CSS 애니메이션 : 만들기가 어렵습니까?May 09, 2025 am 12:03 AMcssanimationsarenherinly에 hardbutreepracticenderstandingofcsspropertiesandtimingflestions.1) startsimpleants withsimpleatslikeScalingabuttononHoverusingKeyframes.2) useAsingfuctionslikecubic-bezierfornateffects, 그러한 분위기, 3)
@keyframes CSS : 가장 많이 사용되는 트릭May 08, 2025 am 12:13 AM@keyframesispopularduetoitstativerstatility 및 powerincreatingsmoothcssanimations.keytricksinclude : 1) states 사이에 moothtransitionsbettites, 2) 애니메이션 multiplepropertiessimultory, 3) vendorPixesforBrowsercompatibility, 4) 빗질을 사용하여
CSS 카운터 : 자동 번호 매기기에 대한 포괄적 인 안내서May 07, 2025 pm 03:45 PMcsScounterSearedTomanageAutomaticNumberingInberingInwebDesigns.1) 1) theCanbeusedfortablestoffContents, ListItems 및 CustomNumbering.2) AdvancedUsesInSinestedNumberingsystems.3) CreativeUseNvolvecust를 CreativeSinvolecust.4) CreativeSinvolvecust
스크롤 구동 애니메이션을 사용한 현대 스크롤 그림자May 07, 2025 am 10:34 AM특히 모바일 장치에 스크롤 그림자를 사용하는 것은 Chris가 이전에 다룬 미묘한 UX입니다. Geoff는 애니메이션 타임 라인 속성을 사용하는 새로운 접근 방식을 다루었습니다. 또 다른 방법이 있습니다.
이미지 맵 재 방문May 07, 2025 am 09:40 AM빠른 새로 고침을 통해 실행합시다. 이미지 맵은 html 3.2로 돌아가는데, 먼저 서버 측 맵과 클라이언트 측지 맵은 맵 및 영역 요소를 사용하여 이미지를 통해 클릭 가능한 영역을 정의했습니다.
DEVS 상태 : 모든 개발자를위한 설문 조사May 07, 2025 am 09:30 AMDevs State Survey는 이제 참여에 개방되어 있으며, 이전 설문 조사와 달리 코드, 직장, 건강, 취미 등을 제외한 모든 것을 포함합니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
