CSS 배경 첨부 이미지

Question

이미지 클리핑 고정 328x328 픽셀 https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1

내 사업부의 폭 984px (328x3)입니다.

배경 첨부 파일에 fixed을 사용했을 때 이미지가 잘리지 만 기본값 인 scroll을 사용하면 이미지가 완벽합니다. 왜 이런거야?

잘려 졌을뿐만 아니라 창 전체로 크기를 조정하면 이미지가 사라집니다!

.test { 
 
\t background-color: cyan; 
 
\t height: 1720px; 
 
\t width: 984px; 
 
\t background-image: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1); 
 
\t background-repeat: no-repeat; 
 
    background-position: right top; 
 
    background-attachment: fixed; 
 
}

<div class='test'></div>

Answer 1

fixed은 뷰포트 관련하여 고정되기 때문이다. background-position: right top; background-attachment: fixed;은 뷰포트의 뷰포트 상단/오른쪽에 이미지를 배치합니다. 그리고 배경이 적용된 요소가 뷰포트만큼 넓지 않으므로 (화면 크기에 따라 다름) 배경 이미지가 잘립니다. 엘리먼트에서 width을 제거하여 뷰포트의 상단/우측 모서리에 있고 배경이 상단/우측 모서리에있는 한 배경이 상단/우측 모서리에 고정되도록합니다.

.test { 
 
    background-color: cyan; 
 
    height: 1720px; 
 
    /*width: 984px;*/ 
 
    background-image: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1); 
 
    background-repeat: no-repeat; 
 
    background-position: right top; 
 
    background-attachment: fixed; 
 
}

<div class='test'></div>