`배경 크기: 커버`를 사용할 때 고정된 배경 이미지가 잘리는 이유는 무엇입니까?

CSS 배경 크기: 표지 및 배경 첨부: 고정 배경 이미지 자르기

문제:

배경 이미지가 '표지' 및 '고정'으로 설정된 그림 목록에서 이미지는 그림이 뷰포트에서 오프셋되면 잘립니다.

설명:

이 동작은 CSS에서 "고정" 위치 지정이 작동하는 방식에 내재되어 있습니다. "고정" 위치 지정은 요소의 위치 지정 컨텍스트에서 배경 이미지를 제거하고 뷰포트에 맞춰 정렬합니다. 결과적으로 "배경 크기: 커버"의 "커버" 값은 요소 자체가 아닌 뷰포트를 기준으로 계산됩니다.

제안된 솔루션:

순수 CSS로는 "고정" 위치 지정과 배경 이미지에 "표지"를 사용할 수 없습니다.

대안 해결 방법:

"고정" 위치 지정 대신 배경 연결에 "스크롤"을 사용하고 이벤트 리스너를 JavaScript의 스크롤 이벤트에 바인딩하세요. 이는 창의 스크롤 거리에 따라 배경 위치를 수동으로 업데이트하여 컨테이너 요소를 기준으로 "커버"를 유지하면서 고정 위치를 시뮬레이션합니다.

위 내용은 `배경 크기: 커버`를 사용할 때 고정된 배경 이미지가 잘리는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!