CSS 그라디언트를 사용하여 배경 이미지에 점진적인 페이드인 효과를 만드는 방법은 무엇입니까?

CSS 그라데이션을 사용하여 배경 이미지에 점진적인 페이드 만들기

배경 이미지 위에 선형 그라데이션을 적용하면 표시하기 어려울 수 있습니다. 두 요소를 동시에. 다음 단계는 프로세스를 안내합니다.

잘못된 시도:

body {
  background: url('background_image.jpg') no-repeat,
    -webkit-gradient(linear, left top, left bottom,
      from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}

이 예에서는 배경 이미지가 이전에 배치되므로 그라데이션이 표시되지 않습니다. 입니다.

맞습니다 접근 방식:

그라디언트 및 배경 이미지를 올바르게 표시하려면 다음과 같이 배경 이미지가 CSS 줄 끝에 배치되도록 해야 합니다.

body {
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))),
    url('background_image.jpg') no-repeat;
}

줄 끝에 이미지 URL을 추가하면 그라데이션이 이미지 위에 오버레이되어 배경 하단에 검정색에서 투명까지 원하는 페이딩 효과를 제공합니다.

위 내용은 CSS 그라디언트를 사용하여 배경 이미지에 점진적인 페이드인 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!