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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
