CSS의 배경 이미지에 그라디언트를 어떻게 오버레이할 수 있나요?

배경 이미지의 그라데이션 오버레이: 솔루션 공개

배경 이미지와 그라데이션 오버레이를 동시에 표시할 수 없다는 점은 답답할 수 있습니다. 그러나 해결책은 간단하며 CSS 선언 내 요소의 올바른 순서에 있습니다.

배경 하단에서 검정색에서 투명으로 원하는 페이딩 효과를 얻으려면 다음 단계가 중요합니다.

1. 배경 이미지 URL을 줄 끝에 배치: 직관과는 달리 배경 이미지의 URL을 배치해야 합니다. 수정된 코드에서 볼 수 있듯이 그래디언트 선언 뒤:

.css {
  background: 
   linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
   url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;
}

2. 올바른 구문 확인: 예제 코드에는 그래디언트 선언에 유효한 CSS 구문이 포함되어 있습니다. 여러 색상 정지점은 괄호 안에 정의되며 그라디언트의 시작 및 끝 위치는 백분율을 사용하여 지정됩니다.
3. 컨테이너 높이 제공: 그라디언트 효과가 표시되도록 하려면, 그라데이션 및 배경 이미지가 포함된 컨테이너 요소에 대해 높이를 설정해야 합니다. 제공된 코드에서 ".css" 요소의 높이는 200픽셀입니다.

이러한 조정을 적용하면 이제 그라데이션 오버레이가 배경 이미지 위에 올바르게 표시되어 원하는 페이딩 효과.

위 내용은 CSS의 배경 이미지에 그라디언트를 어떻게 오버레이할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!