마스크를 사용하여 CSS 불투명도 그라디언트를 만드는 방법은 무엇입니까?

CSS 불투명 그라데이션

목표는 그라데이션이 포함된 오버레이가 적용되는 제공된 예와 유사한 CSS 기반 효과를 만드는 것입니다. 역동적인 색상으로 배경 위에.

CSS 마스크 사용

CSS에서는 마스크를 사용하여 이를 구현할 수 있습니다. 이 방법에 대한 브라우저 지원은 여전히 ​​제한되어 있지만 최신 버전의 Chrome, Safari 및 Opera는 필수 속성(-webkit-mask-image 및 -webkit-mask-size 등)을 지원합니다.

핵심은 다음과 같습니다. 완전한 불투명도(가시)로 시작하여 투명도(보이지 않음)로 끝나는 그라데이션 자체인 마스크를 만듭니다. 이렇게 하면 아래 콘텐츠에 그라데이션 효과가 나타납니다.

코드 구현

p {
  color: red;
  -webkit-mask-image: -webkit-gradient(linear,
    left top,
    left bottom,
    from(rgba(0,0,0,1)),
    to(rgba(0,0,0,0)));
}

사용 예

이 CSS를 단락 요소에 적용하여 그라데이션 효과로 텍스트를 표시할 수 있습니다.

<p>This is a paragraph with a CSS opacity gradient.</p>

이 예에서 텍스트는 왼쪽이 불투명하다가 왼쪽이 투명하게 변하는 그라데이션 내에서 빨간색으로 표시됩니다. 권리. 투명도를 사용하면 오른쪽으로 이동할 때 배경색이 비쳐보일 수 있습니다.

불투명도 그라데이션 효과를 보려면 배경 요소의 색상을 설정해야 한다는 점에 유의하는 것이 중요합니다. 제공된 예에서 배경색은 연한 파란색입니다.

  <p>This is a paragraph with a CSS opacity gradient.</p>

위 내용은 마스크를 사용하여 CSS 불투명도 그라디언트를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!