利用CSS固定背景交替实现视差滚动效果

视差滚动效果近年来很受大家的欢迎，但实现这个功能一般都需要javaScript，而且实现做起来有一定的难度。就这个问题，我们跟大家分享另外一种比较简单的视差滚动效果技术，只需要CSS就可以实现了。一起来看看吧。

演示

该滚动效果特点是使用固定背景与色块内容交替，当访客向下滚动时，背景是fixed固定的，具体请查看：在线演示

从上图可以看出，内容向上滚动时，第一张背景是固定的，不会跟着向上滚动。即：固定背景 + 色块内容 + 固定背景 + 色块内容…这样的交替方式，从而产生视差效果。

兼容性

IE9+ Firefox Chrome Safari Opera 使用教程

HTML代码

HTML代码结构很清晰，使用main标签包住所有内容，其中.cd-fixed-bg样式就是固定背景，.cd-scroll-bg样式为色块内容。

<main> <div class="cd-fixed-bg cd-bg-1"> <h1>标题</h1> </div>

<div class="cd-scrolling-bg cd-color-1"> <div class="cd-container"> <p> 内容... </p> </div> </div>

<div class="cd-fixed-bg cd-bg-2"> <h1>标题</h1> </div>

<div class="cd-scrolling-bg cd-color-2"> <div class="cd-container"> <p> 内容... </p> </div> </div> </main> CSS样式 主要是通过css的background-attachment:fixed定位属性来让背景固定，具体请看下面的样式代码：

body, html, main { /* important */ height: 100%; }

.cd-fixed-bg { min-height: 100%; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; }

.cd-fixed-bg.cd-bg-1 { background-image: url("../img/cd-background-1.jpg"); } .cd-fixed-bg.cd-bg-2 { background-image: url("../img/cd-background-2.jpg"); } .cd-fixed-bg.cd-bg-3 { background-image: url("../img/cd-background-3.jpg"); } .cd-fixed-bg.cd-bg-4 { background-image: url("../img/cd-background-4.jpg"); }

.cd-scrolling-bg { min-height: 100%; }

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

文章题目：利用CSS固定背景交替实现视差滚动效果
标题网址：/news5/318805.html

成都网站建设公司_创新互联，为您提供品牌网站制作、服务器托管、用户体验、网站制作、响应式网站、网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联