CSS를 사용하여 왼쪽에서 오른쪽으로 배경색 전환의 구배 효과를 달성하고 점차적으로 위에서 아래로 가벼워지는 방법은 무엇입니까?

진보적 인 배경 만들기 : CSS 그라디언트 왼쪽에서 오른쪽, 깊은 곳에서 얕은 것까지

이 기사는 CSS를 사용하여 고유 한 배경 효과를 만드는 방법을 보여줍니다. 왼쪽에서 오른쪽으로 부드럽게 전환되는 그라디언트는 점차적으로 위에서 아래로 가벼워집니다. 이 디자인은 웹 페이지에 레이어링과 깊이를 추가하고 사용자 경험을 향상시킬 수 있습니다.

이 효과를 달성하려면 CSS 기울기 및 마스킹 기술을 결합해야합니다. 우리는 수직 구배 마스크와 결합 된 mask-image 특성을 사용하여 그라디언트의 투명성을 영리하게 제어합니다.

다음 CSS 코드는 대상 효과를 달성합니다.

 html, body {
    너비 : 100%;
    높이 : 100%;
}

html {
    배경색 : #ffffff; /* 흰색 배경 제공*/
}

몸 {
    -webkit-mask-Image : 선형 그레이드 (하단, #000000, 투명); /* 수직 마스크, 상위 내피, 하단 조명*/
    배경 이미지 : 선형 그레이드 (오른쪽, RGB (39, 121, 245), RGB (81, 221, 240), RGB (118, 216, 118)); /* 수평 구배, 깊고 오른쪽으로 얕은 얕은*/
    배경 반복 : 비 반복; /* 그라디언트 복제 방지*/
}

코드 설명 :

• html, body : html 및 body 요소의 너비와 높이를 100%로 설정하여 배경이 전체 페이지를 덮도록합니다.
• html { background-color: #ffffff; } : html 요소의 흰색 배경을 그라디언트의 배경색으로 설정하십시오.
• body { -webkit-mask-image: ... } : -webkit-mask-image 속성을 사용하여 선형 구배 마스크를 위에서 아래로 ( to bottom ) 적용하십시오. 그라디언트는 검은 색 ( #000000 )에서 투명 ( transparent )으로 전환하여 점차적으로 가벼워지는 효과를 달성합니다. 참고 : -webkit- 접두사는 이전 브라우저와의 호환성을위한 것입니다.
• body { background-image: ... } : 왼쪽에서 오른쪽으로 ( to right ) 선형 그라디언트 배경 색상을 정의하고, 검은 색은 진한 파란색 ( rgb(39, 121, 245) )에서 밝은 녹색 ( rgb(118, 216, 118) )로, 중간 색상은 rgb(81, 221, 240) 으로 부드러운 전이를 달성합니다.
• body { background-repeat: no-repeat; } : 배경 기울기가 반복되는 것을 방지합니다.

위의 CSS 코드를 통해 레이어링과 시각적 영향으로 쉽게 진보적 인 배경 효과를 만들 수 있습니다. 이 기술은 웹 디자인의 광범위한 응용 프로그램을 가지고 있으며 특히 주요 영역을 강조 표시해야하거나 특정 분위기가 생성되는 시나리오에 적합합니다.

위 내용은 CSS를 사용하여 왼쪽에서 오른쪽으로 배경색 전환의 구배 효과를 달성하고 점차적으로 위에서 아래로 가벼워지는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!