'배경 크기: 표지' 및 '배경 첨부: 고정'을 사용할 때 잘린 배경 이미지가 예기치 않게 잘리는 이유는 무엇입니까?

CSS background-size:cover background-attachment:fixed로 잘린 배경 이미지

CSS 속성을 사용하는 경우 background-size:cover 및 background-attachment:fixed on 컨테이너 요소의 경우 요소가 뷰포트의 전체 크기가 아닌 경우 배경 이미지가 예기치 않게 잘릴 수 있습니다. 이는 아래 설명된 것처럼 두 속성의 조합 때문입니다.

배경 첨부 효과: 고정

배경 첨부: 고정 배경 이미지가 위치처럼 동작하도록 합니다: 고정 요소 , 이는 더 이상 문서의 일반적인 흐름의 일부가 아니며 뷰포트에 대해 고정되어 있음을 의미합니다.

배경 크기와의 상호 작용: 커버

배경 크기: 커버는 전체 컨테이너 요소를 덮도록 배경 이미지의 크기를 조정합니다. background-attachment:fixed와 결합하면 컨테이너 요소뿐만 아니라 전체 뷰포트를 덮도록 이미지 크기가 조정됩니다.

배경 이미지 클리핑

컨테이너 요소가 뷰포트보다 작으면 배경 이미지가 컨테이너 요소에 수직으로 맞게 잘립니다. 그러나 전체 뷰포트 너비를 포괄하도록 수평으로 크기가 조정됩니다. 이로 인해 이미지가 왼쪽과 오른쪽에서 잘릴 수 있습니다.

해결책

안타깝게도 원하는 효과를 얻을 수 있는 방법이 없습니다(이미지가 세로 또는 가로로 잘리지만 둘 다 잘리지는 않고, 컨테이너 요소를 중심으로) 순수 CSS를 사용합니다. 이는 CSS에서 고정 위치 지정이 작동하는 근본적인 방식 때문입니다.

원하는 효과를 얻으려면 JavaScript를 사용하여 창의 스크롤 위치를 기준으로 background-position 속성을 수동으로 업데이트하여 고정 위치를 시뮬레이션해야 합니다. 배경 크기를 계산하는 동안 위치 지정: 컨테이너 요소를 기준으로 덮습니다.

위 내용은 '배경 크기: 표지' 및 '배경 첨부: 고정'을 사용할 때 잘린 배경 이미지가 예기치 않게 잘리는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!