📝 代码查看
使用runcode.html页面

1
查看次数
2025-11-07
创建时间
2025-11-07
最后更新
<section class="g-img1">区域1</section>
<section class="g-img2">区域2</section>
<section class="g-img3">区域3</section>
$img1: 'https://picsum.photos/1200/1000?random=1';

$img2: 'https://picsum.photos/1200/1000?random=5';

$img3: 'https://picsum.photos/1200/1000?random=10';

section {
    height: 100vh;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    line-height: 100vh;
    text-align: center;
    font-size: 20vh;
    box-sizing: border-box;
    // border: 5px solid #fff;
}

.g-img1 {
    background-image: url($img1);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

.g-img2 {
    background-image: url($img2);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

.g-img3 {
    background-image: url($img3);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}
暂无JavaScript代码

👁️ 实时预览