최신 웹사이트에 대한 CSS 불투명도 그라디언트 효과를 만드는 방법은 무엇입니까?

CSS 불투명도 그라데이션 효과 달성

동적 배경색이 있는 최신 웹사이트의 경우 제공된 예와 유사한 불투명도 그라데이션 효과를 생성할 수 있습니다. CSS를 사용하지만 대체 접근 방식이 필요합니다.

흰색 오버레이를 사용하는 것과 달리 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>

마스크 속성 지원은 현재 Chrome, Safari, 그리고 오페라. Firefox는 현재 SVG 마스크만 지원합니다.

그러나 흥미로운 개발 과정에서 Internet Explorer를 제외한 모든 주요 브라우저는 이제 언급된 모든 마스크 속성을 지원합니다. 이를 통해 웹 전체에서 CSS 불투명도 그라디언트를 원활하게 구현할 수 있습니다.

단색 배경을 사용한 전체 데모를 보려면 다음 코드를 참조하세요.

<code class="css">p  {
  color: red;
  font-size: 30px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-size: 100% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top, left bottom;
  }

div {
    background-color: lightblue;
}</code>

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