텍스트 오버레이를 위해 CSS에서 동적 불투명 그라디언트를 만드는 방법은 무엇입니까?

CSS에서 불투명도 그라데이션 만들기

동적 배경색이 있음에도 불구하고 목표는 텍스트를 부분적으로 가리는 효과를 만드는 것입니다. 배경. 흰색 오버레이는 정적 배경에 작동하지만 동적 배경에는 CSS 불투명 그라데이션이 필요합니다.

CSS 마스크 이미지 사용

최신 브라우저(Chrome, Safari, Opera) CSS 마스크 이미지를 사용하여 원하는 효과를 생성하도록 지원합니다. 핵심은 투명도로 전환되는 그라데이션을 통합하는 마스크를 정의하는 것입니다.

<code class="CSS">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)));
}</code>

여기서 rgba(0,0,0,1)는 완전 불투명도를 나타내고 rgba(0,0,0,0) )은 완전한 투명성을 나타냅니다.

데모 및 호환성

데모를 보고 실제 효과를 관찰하세요.

참고 이 기술은 이전 브라우저에서는 지원이 제한되어 있는 마스크 이미지 속성에 의존합니다. 특히 Firefox는 현재 SVG 마스크를 대신 지원합니다.

자세한 정보 및 브라우저 호환성 세부 정보는 Caniuse: https://caniuse.com/?search=mask-image

를 참조하세요.

위 내용은 텍스트 오버레이를 위해 CSS에서 동적 불투명 그라디언트를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!