배경 이미지에 CSS 그라데이션을 오버레이하려면 어떻게 해야 합니까?

배경 이미지에 CSS 그라데이션 오버레이

많은 개발자가 배경 이미지와 선형 그라데이션을 동시에 표시하려고 할 때 어려움을 겪습니다. 목표는 배경 하단에 일반적으로 검은색에서 투명하게 점진적인 전환을 만드는 것입니다. 그러나 대부분의 경우 그라데이션이나 이미지만 표시되고 둘 다 표시되지 않습니다.

이 문제의 해결 방법은 배경 스타일에서 요소의 순서를 올바르게 지정하는 것입니다. 그라데이션을 이미지에 성공적으로 오버레이하려면 다음 수정된 구문을 따르십시오.

body {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,1))),
  url("http://www.skrenta.com/images/stackoverflow.jpg") no-repeat;
}

배경 이미지 URL을 줄 끝에 배치하여 해당 URL이 그라데이션 아래에 나타나도록 하여 두 요소가 모두 허용되도록 합니다. 보입니다.

위 내용은 배경 이미지에 CSS 그라데이션을 오버레이하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!