CSS를 사용하여 이미지에 마스크 추가

요소에 레이어를 배치하여 부분적으로 또는 완전히 숨길 수 있습니다. 마스크 이미지 속성은 요소에 레이어를 지정하는 데 사용되는 CSS 속성입니다. 이미지일 수도 있지만 이미지에 마스크를 추가하려면 이미지 주소를 사용해야 합니다.

이 글에서는 CSS 속성을 사용하여 이미지에 마스크를 추가하는 방법과 동일한 속성으로 더 많은 작업을 수행할 수 있는 방법을 살펴보겠습니다.

이미지에 마스크 추가

mask-image 속성은 원하는 이미지나 텍스트에 마스크를 추가하는 데 사용할 속성입니다. 이 속성은 이미지를 부분적으로 또는 완전히 숨길 수 있는 레이어를 추가합니다. 이 속성을 더 잘 이해하기 위해 속성의 구문을 간단히 살펴보겠습니다.

문법

으아아아

mask-image 속성에 다른 값을 사용하면 none 값은 마스크 레이어를 추가하지 않지만 이미지나 텍스트 위에 투명한 검정색 레이어를 설정합니다. 값은 선형 그래디언트 마스크를 추가할 수 있습니다. 초기 값은 속성 값을 기본값으로 설정하고 상속된 값은 이 속성을 사용하는 요소의 가장 가까운 상위 항목의 마스크 속성을 상속 합니다.

이 속성을 더 잘 이해하기 위해 예제를 통해 마스크 이미지 속성의 값이 어떻게 작동하는지 자세히 알아볼 것입니다.

예

이 예에서는 값을 사용하여 이미지에 마스크를 추가할 수 있도록 이미지의 주소를 추가하겠습니다.

여기서 컨테이너 클래스를 만든 다음 CSS 부분으로 이동했습니다. 이 부분에서는 먼저 높이와 너비를 변경한 다음 인쇄하려는 이미지와 함께 마스크 속성을 사용했습니다. 코드에서 얻은 출력을 살펴보겠습니다.

으아아아

마스크 이미지 속성을 사용한 후 이미지가 마스크되는 것을 볼 수 있듯이 이것이 우리가 얻게 될 출력입니다.

이제 다른 예시에서 새로운 속성 값을 사용할 것이므로 다음 예시로 넘어가겠습니다.

예

이 예에서는 마스크 이미지 속성을 사용하고 그 값을 선형 그래디언트로 설정하겠습니다. 이제 코드로 이동하여 이 속성이 어떻게 작동하는지 살펴보겠습니다.

으아아아

위 코드에서는 먼저 컨테이너를 만든 다음 CSS 섹션에서 높이와 너비를 변경합니다. 그런 다음 마스크를 적용하려는 이미지를 추가하고 마스크 이미지 속성을 사용하여 해당 값을 선형 그래디언트로 설정했습니다. 색상을 검정색으로 81%, 투명도를 20%로 설정했습니다. 위의 코드를 간단히 살펴보겠습니다.

위 예시에서는 이미지가 아래쪽에서 투명하게 보이는 것을 볼 수 있는데, 이는 이미지에 마스크가 적용되었다는 의미입니다.

NOTE - 선형 그래디언트의 검정색 값을 100%로 설정하면 우리가 가진 이미지가 사용자에게 완전히 표시되고, 투명도를 100%로 설정하면 이미지가 마스크에 의해 완전히 숨겨집니다.

예

아래 예에서는 속성 값을 방사형 그라데이션으로 변경합니다. 즉, 이제 마스크가 원형 형태로 추가되고 코드의 다른 구성 요소는 유사합니다. 아래 코드를 사용하여 얻을 수 있는 출력을 살펴보겠습니다.

으아아아

위 과정을 실행해보면 이미지의 일부는 투명하고 일부는 어두워지면서 마스크가 원형 형태로 나타나는 것을 확인할 수 있습니다.

왜 -webkit 접두사를 사용하나요?

대부분의 브라우저는 현재 사용하는 마스킹 기능을 부분적으로만 지원하기 때문에 -webkit 접두사를 사용합니다. 우리는 모든 브라우저와의 호환성을 위해 -webkit 접두사와 표준 속성을 모두 사용합니다.

결론

CSS의 마스크는 속성에 사용된 값에 따라 속성을 부분적으로 또는 완전히 숨길 수 있습니다. 마스크는 마스크 클립, 마스크 이미지, 마스크 모드, 마스크 원점 등과 같이 사용할 수 있습니다. 마스킹 속성은 이미지나 텍스트에 마스크를 설정할 수 있으며 적용하려는 마스크의 모양을 변경할 수도 있습니다. 사용자의 몰입도를 높이거나 이미지의 특정 부분을 숨기기 위해 이미지에 마스크가 적용됩니다.

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