배경 첨부 : IMG에 대한 고정 된 동등 물

Question

배경 - 첨부의 CSS 전용 동등한 효과를 찾으려고합니다. 인라인 IMG 요소와 함께 작동하는 고정. 내가 시도한 위치 : 고정,하지만 문서 흐름에서 이미지를 제거하면이 인스턴스에서 작동하지 않습니다.

https://codepen.io/julianapong/pen/vewmzw

body{ 
 
    height:2000px; 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
*{ 
 
    box-sizing:border-box; 
 
} 
 

 
.bg_fixed{ 
 
    float:left; 
 
    display:inline-block; 
 
    width:32vw; 
 
    height: 100vh; 
 
    background-attachment:fixed; 
 
    background-size:contain; 
 
    background-repeat:no-repeat; 
 
} 
 

 
.img_absolute{ 
 
    width:32vw; 
 
    height:100vh; 
 
    float:left; 
 
    position:relative; 
 
} 
 

 
.img_absolute img{ 
 
    height:100%; 
 
    width:100%; 
 
    object-fit:cover; 
 
    position:absolute; 
 
    left:0; 
 
    z-index:-1; 
 
} 
 

 
.img_fixed{ 
 
    position:fixed; 
 
    width:33vw; 
 
    height: 100vh; 
 
    z-index:-1 
 
    right:0; 
 
} 
 

 
.img_fixed_container{ 
 
    border:1px solid red; 
 
    width:32vw; 
 
    height: 100vh; 
 
    right:0; 
 
    overflow:hidden; 
 
}

<div class="bg_fixed" style= 
 
    "background-image:url('https://i.imgur.com/KEMR0bJ.jpg')"> 
 
     bg_fixed 
 
</div> 
 

 
<div class="img_absolute"><img src="https://i.imgur.com/KEMR0bJ.jpg" /><span >img_absolute</span></div> 
 

 
<div class="img_fixed_container"><img class="img_fixed" src="https://i.imgur.com/KEMR0bJ.jpg" /><span >img_fixed</span></div>

가 이상적으로, 나는 img_absolute을 좋아하거나 bg_fixed 같은 행동을 스크롤 할 수 img_fixed 것 :

여기 내 codepen입니다. 이 작업을 수행 할 CSS 트릭이 있습니까?

Answer 1

.img_fixed { 
    position: fixed; 
    width: 33vw; 
    height: 100vh; 
    z-index: -1; 
    right: 0; 
    transform: perspective(0px); 
    /* added */ 
} 

.img_fixed_container { 
    border: 1px solid red; 
    width: 33vw; 
    height: 100vh; 
    right: 0; 
    overflow: hidden; 
    /* added */ 
    position: absolute; 
    clip: rect(0, auto, auto, 0); 
} 

코드 조각 데모 : 이것처럼

body { 
 
    height: 2000px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
.bg_fixed { 
 
    float: left; 
 
    display: inline-block; 
 
    width: 33vw; 
 
    height: 100vh; 
 
    background-attachment: fixed; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.img_absolute { 
 
    width: 33vw; 
 
    height: 100vh; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.img_absolute img { 
 
    height: 100%; 
 
    width: 100%; 
 
    object-fit: cover; 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: -1; 
 
} 
 

 
.img_fixed { 
 
    position: fixed; 
 
    width: 33vw; 
 
    height: 100vh; 
 
    z-index: -1; 
 
    right: 0; 
 
    transform: perspective(0px); 
 
    /* added */ 
 
} 
 

 
.img_fixed_container { 
 
    border: 1px solid red; 
 
    width: 33vw; 
 
    height: 100vh; 
 
    right: 0; 
 
    overflow: hidden; 
 
    /* added */ 
 
    position: absolute; 
 
    clip: rect(0, auto, auto, 0); 
 
}

<div class="bg_fixed" style="background-image:url('https://placehold.it/500x700')"> 
 
    bg_fixed 
 
</div> 
 

 
<div class="img_absolute"><img src="https://placehold.it/500x700" /><span>img_absolute</span></div> 
 

 
<div class="img_fixed_container"><img class="img_fixed" src="https://placehold.it/500x700" /><span>img_fixed</span></div>