고정 된 배경 첨부 해킹

스크롤하는 동안 유지하는 고정 된 배경을 원하십니까? background-attachment: fixed 종종 모바일 브라우저에서 실패합니다. 이 효과를 달성하기위한 해결 방법 인 "핵"이 있습니다.

문제

선형 그라디언트와 이미지의 두 가지 배경 유형으로 문제를 살펴 보겠습니다.

선형 구배

스크롤의 고정 구배의 경우이 CSS를 사용할 수 있습니다.

 몸 {
  배경 : 선형 등급 (335deg, RGBA (255,140,107,1) 0%, RGBA (255,228,168,1) 100%);
  배경 상착 : 고정;
  배경 위치 : 센터;
  배경 반복 : 비 반복;
  높이 : 100VH;
}

안드로이드 크롬과 파이어 폭스에서 그라디언트 스크롤이 점프됩니다. 이것은 URL 막대가 숨어/나타날 때 실시간으로 그라디언트를 다시 렌더링하는 브라우저의 어려움과 관련이있는 것 같습니다. iOS 사파리는 비슷한 행동을 보여줍니다.

배경 이미지

문제는 이미지와 동일합니다.

 몸 {
  배경 : url (../ assets/test_pic.jpg);
  배경 반복 : 비 반복;
  배경 크기 : 덮개;
  배경 위치 : 센터;
  배경 상착 : 고정;
  높이 : 100VH;
}

background-attachment: fixed 은 height 속성을 무시하고 요소의 높이가 아닌 뷰포트에 대한 위치를 계산합니다. 이는 background-attachment: fixed 가장 작은 뷰포트를 사용하는 반면 요소는 가장 큰 뷰포트를 사용합니다. VH (Viewport Units)는 URL 막대가 가시성을 변경할 때 크기를 조정하지 않습니다.

caniuse background-attachment: fixed 로 브라우저 불일치를 강조 표시합니다.

솔루션 (해킹)

이 솔루션은 background-attachment: fixed 및 별도의 요소를 사용합니다. background-attachment: fixed 가장 작은 뷰포트를 사용하는 경우 가장 큰 요소를 사용하는 요소를 사용해 봅시다.

두 개의 div : 하나는 배경과 컨텐츠 용으로 하나를 만듭니다.

<div class="bg"></div>
<div class="content">
  
</div>

다음과 같이 스타일을 지정합니다.

 .BG {
  배경 : 선형 등급 (335deg, RGBA (255,140,107,1) 0%, RGBA (255,228,168,1) 100%);
  배경 반복 : 비 반복;
  배경 위치 : 센터;
  높이 : 100VH;
  너비 : 100VW;
  위치 : 고정;
  Z- 인덱스 : -1; / * 선택 사항 */
}

.콘텐츠 {
  위치 : 절대;
  마진 탑 : 5rem;
  왼쪽 : 50%;
  변환 : translatex (-50%);
  너비 : 80%;
}

이것은 배경 이미지와 유사하게 작동합니다.

 .img {
  배경 : url ( '../ assets/test_pic.jpg');
  배경 위치 : 센터;
  배경 반복 : 비 반복;
  배경 크기 : 덮개;
  위치 : 고정;
  높이 : 100VH;
  너비 : 100VW;
}

URL 막대가 숨어있을 때 사소한 스크롤이 발생할 수 있지만 주요 문제가 해결됩니다.

고려 사항

이 "해킹"은 a를 사용합니다<div> 대신<code><img alt="고정 된 배경 첨부 해킹" > 의미와 접근성에 영향을 줄 수있는 태그. 이미지가 의미에 중요하다면 An을 사용하십시오<img alt="고정 된 배경 첨부 해킹" > 적절한 alt 텍스트를 사용하면 해킹이 완벽하게 작동하지 않더라도 더 좋습니다. 자동 가죽으로 된 하단 탐색 표시 줄은 여전히 ​​문제를 일으킬 수 있습니다. 이러한 경우 JavaScript가 필요할 수 있습니다.