CSS 기술: 이미지에 마스크를 추가하는 방법(공유)

이전 기사 "CSS 구문이란 무엇입니까? 사용 방법 및 규칙에 대한 자세한 소개 》CSS 구문의 사용 방법 및 규칙을 소개합니다. 다음 기사에서는 CSS를 사용하여 이미지에 마스크 효과를 추가하는 방법에 대해 설명합니다. 이 팁은 매우 실용적이며 몇 줄의 코드만 있으면 됩니다.

마스크 추가

마스크는 브라우저에 표시되어야 하는 자산 요소를 알려주므로 창의적인 모양과 레이아웃을 구축하는 데 좋습니다. 마스킹은 래스터 이미지(예: 투명한 부분이 있는 PNG 형식), CSS 그라데이션 또는 SVG 요소를 사용하여 세 가지 방법으로 수행할 수 있습니다.

일반적인 래스터 이미지와 달리 SVG는 품질 저하 없이 크기를 조정하거나 변환할 수 있습니다.

첨부 코드:

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
}

Firefox는 최신 버전만 지원하므로 인라인 SVG 마스크 요소를 사용해야 한다는 점을 언급할 가치가 있습니다. 투명도 수준의 래스터 이미지를 사용하면 어떻게 되나요? 이미지의 투명한 부분은 보이지 않습니다. 즉, 불투명한 부분이 표시되고 다른 부분은 숨겨집니다. 마스킹은 배경 이미지에 동일한 속성을 적용하여 위치, 크기 및 반복을 정의할 수 있으므로 특히 강력합니다.

전처리:

후처리:

투명도 수준을 사용하여 애니메이션 이미지(예: GIF 파일)의 일부를 잘라낼 수 있습니다. 이러한 속성을 사용할 때 교차하는 것을 잊지 마세요. 브라우저 지원 및 프로비저닝 비즈니스 접두사 추가.

추천 학습: CSS 비디오 튜토리얼

위 내용은 CSS 기술: 이미지에 마스크를 추가하는 방법(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!