CSS 여러 고정 배경 psuedo 요소

Question

CSS 만 사용하고 제 3 자 라이브러리가없는 시차 스크롤 효과를 만들려고합니다. background-attachment: fixed을 사용하면 내 페이지에서 여러 개의 전체 너비 div에 대해 원하는 효과를 얻을 수있었습니다. 그러나이를 사용하면 성능에 부정적인 영향을 미칩니다. 내가 대신 하나 내 방법은 here을 발견 변경 :

.element { 
    overflow: hidden; // added for pseudo-element 
    position: relative; // added for pseudo-element 

    // Fixed-position background image 
    &::before { 
    content: ' '; 
    position: fixed; // instead of background-attachment 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: url('/path/to/img.jpg') no-repeat center center; 
    background-size: cover; 
    will-change: transform; // creates a new paint layer 
    z-index: -1; 
    } 
} 

내가 그것을 밖으로 시도하는 하나 개의 사업부에이 방법을 사용, 그것은 우수했다. 그러나 나머지 부분에 적용했을 때 배경이 모두 겹쳐서 나머지는 나중에 있기 때문에 하나만 보았습니다. 모든 의사 요소가 겹치므로 분명히 z- 인덱스 문제이지만 CSS 전용 솔루션을 생각할 수는 없습니다.

Answer 1

불행히도, 귀하의 시차 효과가 하나 이상의 div에서 작동하지 않을 것이라고 생각합니다. 작업 예제에서도 첫 번째 이미지는 div에 상관없이 전체 페이지의 배경으로 유지됩니다. div1 및 div로 덮어 씁니다.

다음 링크를 살펴 보겠습니다. 만드는 여러 사업부 시차 효과 :

Pure CSS Parallax Websites

희망이 도움이!