滚动页面时背景相对内容不动,空间感拉满
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .para{height:170px;margin:12px auto;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.45)),linear-gradient(135deg,#a371f7,#4a9eff 60%,#57ab5a);background-size:cover;background-position:center;background-attachment:fixed}<div class="fx">
<div class="para">背景"不动" = 视差</div>
</div>