实例：视差滚动 ，高级感满满！！！

技术：HTML+CSS

结构剖析：

【资料图】

基本结构：此插件由四张图片和橙色方框以及两段文本组成。

颜色代码：#ff70000

HTML:

首先我们设置两个类名，因为有四张图片，我们设置mg1-mg4的四个类名，在mg1-mg4里嵌套类名wd用以添加文本。

CSS:

1、设置css，图片滚动

首先使用代码引入图片，background-image: url();引入文件包里面的图片。

设置起始位置：使用层叠样式表属性background-position:0 0;设置背景图像的起始位置为0 0；这是一个默认值。

固定背景图像：使用代码 background-attachment: fixed;固定背景图像，使得在运行过程中，只会按照向下原则运行。

图片的宽高度：接下来我们就要设置图片的大小，使用background-size: cover;宽度设置为100% 高度为680px。

注:因为原理一样，所以直接复制粘贴即可，只需要改变类名的数值和图片位置即可。

2、橙色方框和文本内容

HTML:

橙色方框外的文本：首先我们在html的wd里面添加文本 Fengyu online

这样，文本就出现在界面的左上角，我们就要前往css进行设置。

CSS:

文本对齐：我们在css里面使用代码position: relative;配合top使用，设置该位置系数为top: 480px：这是文本会向下移动，这时我们就使用代码 text-align: center;使得文本对齐。

设置文本样式：文字的大小使用代码 font-size: ;设置为55px像素，颜色代码使用color：；设置颜色为#fff（白色），使用代码font-weight:bolder ;使得文本加粗。

代码解释：position: relative;用于指定一个元素在文档中的定位方式。top、right、bottom和left属性则决定了该元素的最终位置。

代码解释：text-align: center;属性规定元素中的文本的水平对齐方式。

橙色方框和文本：首先我们在html里面设置出三个bd的类名，添加到mg的下方。

橙色方框：

在css里面先设置出橙色方框，宽度设置为220px像素，并使用代码的像素，line-height: ;属性设置行间的距离（行高）背景色为橙色，使用代码 background-color: ;代码为#ff7000。

文本：在bd里的bg类名里面添加文本Fengyu Technology。

文本在html里面设置好后，位置在左侧，这时我们就要使用代码 text-align: center;使得文本居中，文字的大小使用代码 font-size: ;设置为55px像素，颜色代码使用color：；设置颜色为#fff（白色），使用代码font-weight:bolder ;使得文本加粗。

成品展示：

完整代码：

HTML:

CSS：