背景附件：为 <img> 修复了适合对象的封面？

Question

是否有技巧或解决方法可以使用object-fit:cover 和父级中的绝对定位制作图像，使其表现得像css 中的background-attachment: fixed？

我想要这个：

<section>
    <img src="" style="object-fit: cover; position: absolute; width: 100%; height: 100%;"
</section>

具有与此相同的功能：

<section style="background: url(..); background-attachment: fixed;">
<section>

Answer 1

position:fixed 结合 clip-path 技巧可以做到

section {
  height: 100px;
  margin: 30px 5px;
  clip-path: inset(0);
}

body {
  min-height: 300vh;
}

<section>
  <img src="https://picsum.photos/id/1/800/800" 
    style="object-fit: cover; 
           position: fixed;
           left:0;
           top:0;
           width: 100%; 
           height: 100%;">
</section>

<section 
  style="
    background-image: url(https://picsum.photos/id/1/800/800); 
    background-attachment: fixed;
    background-size:cover;
    background-position:center;">
</section>