CSS만 사용하여 배경 이미지에 색상을 오버레이하려면 어떻게 해야 합니까?

CSS를 사용하여 이미지에 색상 오버레이

추가적인 추가 작업 없이 배경 이미지에 색상을 오버레이하여 웹사이트의 시각적 효과를 높이는 방법 모색 강요? CSS는 추가 DIV나 호버 효과가 필요 없는 우아한 솔루션을 제공합니다.

오버레이에 그라데이션 활용

한 가지 접근 방식은 여러 배경을 활용하는 것입니다. 예를 들어 이미지 위에 반투명 그라데이션을 만들 수 있습니다.

html {
  min-height: 100%;
  background:
    linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)),
    url(image.jpg);
  background-size: cover;
}

삽입 그림자 사용

또는 상당한 삽입 그림자를 만들 수 있습니다.

.overlay {
  inset: 0;
  box-shadow: inset 0 0 9999px 100% rgba(0, 0, 0, 0.8);
}

배경의 상위 요소 내에 이 CSS 블록을 삽입하세요. image.

이 두 기술 모두 원하는 효과를 얻을 수 있으므로 CSS만 사용하여 배경 이미지에 단색 오버레이를 추가할 수 있습니다.

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