SCSS如何实现自定义多层背景超出初始视口滚动时仍重复显示

是的，我已经查看过所有推荐的相关解答，但没有一个能解决问题

我制作了一个星星动画背景，希望它能在网站上随页面向下滚动全程重复显示，但滚动超出初始视口范围后，背景就会截断。效果参考：

以下是原项目中相关的SCSS代码：

.stars-container {
    background: black repeat;
    background-attachment: fixed;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -10;
    width: 100%;
    height: 100%;
    overflow:hidden;

    @mixin stars-child($time, $opacity) {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        animation: slide $time linear infinite;
        opacity: $opacity;
        background-repeat: repeat;
    }
    .stars1 {
        @include stars-child(10s, 100%);
        background: url(/images/stars/1.png) repeat center; 
    }
    .stars2 {
        @include stars-child(20s, 95%);
        background: url(/images/stars/2.png) repeat center; 
    }
    .stars3 {
        @include stars-child(30s, 90%);
        background: url(/images/stars/3.png) repeat center; 
    }
    .stars4 {
        @include stars-child(40s, 85%);
        background: url(/images/stars/4.png) repeat center; 
    }
    .stars5 {
        @include stars-child(50s, 80%);
        background: url(/images/stars/5.png) repeat center; 
    }
    .stars6 {
        @include stars-child(60s, 75%);
        background: url(/images/stars/6.png) repeat center; 
    }

    @keyframes slide {
        from {background-position: 0px;}
        to {background-position: 900px;}
    }
}

对应使用的HTML代码：

<div class="stars-container">
    <div class="stars1"></div>
    <div class="stars2"></div>
    <div class="stars3"></div>
    <div class="stars4"></div>
    <div class="stars5"></div>
    <div class="stars6"></div>
</div>

背景截断的核心原因是.stars-container设置了position: absolute + height:100%，在父容器未明确设置全高的前提下，这个高度只会匹配初始首屏视口高度，页面滚动超过首屏后，容器本身没有覆盖到下方区域，自然出现截断。

无需改动HTML结构，直接调整SCSS配置即可，修改后完整代码如下：

.stars-container {
    background: black repeat;
    position: fixed; // 原absolute改为fixed，让容器始终相对视口定位，不随滚动偏移
    top: 0;
    left: 0;
    z-index: -10;
    width: 100%;
    height: 100vh; // 原100%改为100vh，明确撑满整个视口高度
    overflow: hidden;

    @mixin stars-child($time, $opacity) {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        animation: slide $time linear infinite;
        opacity: $opacity;
        background-repeat: repeat;
        background-attachment: fixed; // 新增：子元素背景固定，避免动画渲染偏移
    }
    .stars1 {
        @include stars-child(10s, 1);
        background: url(/images/stars/1.png) repeat center; 
    }
    .stars2 {
        @include stars-child(20s, 0.95);
        background: url(/images/stars/2.png) repeat center; 
    }
    .stars3 {
        @include stars-child(30s, 0.9);
        background: url(/images/stars/3.png) repeat center; 
    }
    .stars4 {
        @include stars-child(40s, 0.85);
        background: url(/images/stars/4.png) repeat center; 
    }
    .stars5 {
        @include stars-child(50s, 0.8);
        background: url(/images/stars/5.png) repeat center; 
    }
    .stars6 {
        @include stars-child(60s, 0.75);
        background: url(/images/stars/6.png) repeat center; 
    }

    @keyframes slide {
        from {background-position: 0 0;}
        to {background-position: 900px 0;} // 明确双轴偏移值，规避不同浏览器解析差异
    }
}

• 原代码里opacity写100%、95%这类百分比值虽然多数浏览器兼容，但CSS标准中opacity属性取值范围为0-1，调整为小数写法更规范
• 如果不需要星空固定在视口、而是要随页面滚动同步移动，可以把容器定位改回absolute，同时全局添加html, body { height: 100%; margin: 0; }，再把容器高度改为min-height: 100%即可，不过fixed方案的渲染性能和兼容性更好，更适合做全站固定背景。

内容的提问来源于stack exchange，提问作者Intangible