CSS 그라데이션 오버레이가 배경 이미지 위에 표시되지 않는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

CSS 그라데이션 오버레이가 배경 이미지 위에 표시되지 않는 이유는 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-12-04 05:46:10

원래의

405명이 탐색했습니다.

Why Doesn't My CSS Gradient Overlay Appear Over My Background Image?

배경 이미지의 그라데이션 오버레이: CSS 난제 해결

우아한 페이딩 효과를 위해 배경 이미지에 그라데이션 오버레이를 적용하려고 하면 수수께끼 같은 일이 될 것입니다. CSS에서 그라데이션과 이미지를 모두 지정했음에도 불구하고 하나의 레이어만 표시되는 것 같습니다.

이 문제를 해결하려면 코드 구조를 수정하고 배경 이미지의 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;
}

로그인 후 복사

이 수정을 통해 배경 이미지가 그라디언트 레이어 위에 배치되어 원활한 혼합이 이루어집니다.

위 내용은 CSS 그라데이션 오버레이가 배경 이미지 위에 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!