Question

im试图使网页具有视差效果。在页面顶部，我希望gif以全屏显示。

但是我不希望它被修复。我希望它像平常一样滚动。当我开始滚动时，无论gif的高度如何，都需要立即剪切掉。

我的问题是摆脱“固定”，但保持相同的功能。

    #bg {
        position:fixed; 
        top:-50%; 
        left:-50%; 
        width:200%; 
        height:200%;
    }
    #bg img {
        position:absolute; 
        top:0; 
        left:0; 
        right:0; 
        bottom:0; 
        margin:auto; 
        min-width:50%;
        min-height:50%;
    }



<div id="bg">
    <img src="images/bg.jpg" alt="">
</div>

Answer 1

这是您的意思吗？您是否希望bg在页面顶部占据100％的高度和100％的宽度，但又不固定？

body {
  margin: 0;
  padding: 0;
}

.bg {
  width: 100%;
  height: 100vh;
  background: url(https://cdn.pixabay.com/photo/2017/12/29/18/47/nature-3048299__340.jpg);
}

.spacer {
  height: 5000px;
}

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

带滚动的全屏gif，像视差视频效果

1 个答案: