'배경 크기: 커버' 및 '배경 첨부: 고정'으로 인해 배경 이미지가 잘리는 현상이 발생하는데 어떻게 해결할 수 있나요?

CSS 배경 크기: 표지 배경-첨부: 배경 이미지 고정

배경 이미지가 배경 크기와 일치하는 상황이 발생할 수 있나요? : 표지 및 배경 첨부: 고정, 잘림?

The 문제:
질문에서 알 수 있듯이 배경 이미지를 사용하는 그림이 있는 시나리오에서 background-size:cover 및 background-attachment:fixed 조합을 사용하면 오프셋이 있을 때 배경 이미지가 잘립니다. 이는 Mozilla에서 문서화한 CSS의 고유한 동작입니다.

목표:
원하는 결과는 이미지를 세로 또는 가로로 자르는 것입니다. 단, 둘 다는 안 됩니다. 그림 자체 내에서 중앙 정렬.

해결책:
안타깝게도 CSS만으로는 이 결과를 얻을 수 없습니다. 답변에 자세히 설명된 것처럼 CSS의 고정 위치 지정은 배경 이미지와 컨테이너 요소 간의 연결을 끊습니다. 따라서 표지 값이 있어도 이미지 크기는 그림의 크기가 아닌 뷰포트를 기준으로 결정됩니다.

JavaScript 대안:
권장되는 솔루션은 JavaScript를 사용하여 시뮬레이션하는 것입니다. 배경 크기를 계산하는 동안 고정 위치 지정 효과: 그림 요소를 기준으로 덮습니다. 여기에는 스크롤 이벤트를 수신하고 뷰포트 스크롤과 일치하도록 배경 위치를 수동으로 조정하는 작업이 포함됩니다.

위 내용은 '배경 크기: 커버' 및 '배경 첨부: 고정'으로 인해 배경 이미지가 잘리는 현상이 발생하는데 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!