html背景 固定,css制作固定背景，全屏滑动固定背景

一、说明

这个案例是用纯css3制作的，滑动时，文字会滚动移动走，而背景是不变的。效果大家可以点击demo预览一下！

二、原理

相对定位的方式，一层滑动背景，一层固定背景。

滑动背景和固定背景都设置：

position: relative;

min-height: 100%;

当滑动背景滚动走了，出现固定背景。固定背景设置：

background-attachment: fixed;

三：部分代码

css代码：

.cd-main-content {

/* you need to assign a min-height to the main content so that the children can inherit it*/

height: 100%;

position: relative;

z-index: 1;

}

.cd-fixed-bg {

position: relative;

min-height: 100%;

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

z-index: 1;

}

.cd-fixed-bg h1, .cd-fixed-bg h2 {

position: absolute;

left: 50%;

top: 50%;

bo