如何仅用CSS3实现视差效果（禁用背景图与JS方案）

没问题，咱们可以用CSS 3D变换轻松实现这个视差效果，完全符合你的要求——不用JS，也不用背景图，只靠你现有的div+img结构就能搞定。

实现原理 #

核心思路是利用CSS的3D透视空间：给图片容器添加透视效果，让<img>元素在Z轴上向后“退远”，同时用scale属性放大图片，抵消Z轴后退带来的缩小效果。当页面滚动时，处于不同Z层的图片和内容会有不同的滚动速度，自然形成视差。

修改后的代码 #

CSS 代码

.image-div{
    width: 100%;
    float: left;
    perspective: 1000px; /* 创建3D透视空间，值越大视差越平缓 */
    perspective-origin: center top;
    transform-style: preserve-3d; /* 维持子元素的3D变换 */
    position: relative;
    overflow: hidden; /* 防止放大的图片溢出容器 */
    height: 500px; /* 固定容器高度，让视差效果更明显，可根据需求调整 */
}

.image-div img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 让图片自适应容器，避免拉伸变形 */
    transform: translateZ(-200px) scale(1.2); 
    /* translateZ让图片后退，scale抵消缩小，公式：scale(1 + |translateZ|/perspective) */
    position: absolute;
    top: 0;
    left: 0;
}

.content-div{
    width: 100%;
    background: #fff;
    float: left;
    position: relative;
    padding: 2rem; /* 加些内边距让内容更美观 */
    box-sizing: border-box;
}

HTML 代码（无需修改）

<div class="image-div">
    <img src="https://pbs.twimg.com/media/B2XTRwtCAAEnqlP.jpg:large">
</div>
<div class="content-div">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>
</div>

关键细节说明 #

• perspective的值：可以根据需求调整，数值越大，视差效果越平缓；数值越小，效果越强烈。
• translateZ和scale的对应关系：必须保证scale(1 + |translateZ值| / perspective值)，这样图片才能刚好填满容器，不会出现留白或溢出。比如perspective: 1000px，translateZ(-200px)，就需要scale(1.2)。
• object-fit: cover：让图片按比例填充容器，避免拉伸变形，提升视觉效果。
• 给.image-div设置固定高度：这样滚动时能明显看到图片的视差移动，你可以根据设计需求调整高度。

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