實(shí)例：視差滾動 ，高級感滿滿！??！

技術(shù)：HTML+CSS

結(jié)構(gòu)剖析：

基本結(jié)構(gòu)：此插件由四張圖片和橙色方框以及兩段文本組成。

顏色代碼：#ff70000

HTML:

首先我們設(shè)置兩個類名，因?yàn)橛兴膹垐D片，我們設(shè)置mg1-mg4的四個類名，在mg1-mg4里嵌套類名wd用以添加文本。

CSS:

1、設(shè)置css，圖片滾動

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

設(shè)置起始位置：使用層疊樣式表屬性background-position:0 0;設(shè)置背景圖像的起始位置為0 0；這是一個默認(rèn)值。

?

固定背景圖像：使用代碼?background-attachment: fixed;固定背景圖像，使得在運(yùn)行過程中，只會按照向下原則運(yùn)行。

?

圖片的寬高度：接下來我們就要設(shè)置圖片的大小，使用background-size: cover;寬度設(shè)置為100% 高度為680px。

注:因?yàn)樵硪粯?，所以直接?fù)制粘貼即可，只需要改變類名的數(shù)值和圖片位置即可。

2、橙色方框和文本內(nèi)容

HTML:

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

這樣，文本就出現(xiàn)在界面的左上角，我們就要前往css進(jìn)行設(shè)置。

CSS:

文本對齊：我們在css里面使用代碼position: relative;配合top使用，設(shè)置該位置系數(shù)為top: 480px：這是文本會向下移動，這時我們就使用代碼?text-align: center;使得文本對齊。

設(shè)置文本樣式：文字的大小使用代碼 font-size: ;設(shè)置為55px像素，顏色代碼使用color：；設(shè)置顏色為#fff（白色），使用代碼font-weight:bolder ;使得文本加粗。

代碼解釋：position: relative;用于指定一個元素在文檔中的定位方式。top、right、bottom和left屬性則決定了該元素的最終位置。

代碼解釋：text-align: center;屬性規(guī)定元素中的文本的水平對齊方式。

橙色方框和文本：首先我們在html里面設(shè)置出三個bd的類名，添加到mg的下方。

橙色方框：

在css里面先設(shè)置出橙色方框，寬度設(shè)置為220px像素，并使用代碼的像素，line-height: ;屬性設(shè)置行間的距離（行高）背景色為橙色，使用代碼 background-color: ;代碼為#ff7000。

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

文本在html里面設(shè)置好后，位置在左側(cè)，這時我們就要使用代碼?text-align: center;使得文本居中，文字的大小使用代碼?font-size: ;設(shè)置為55px像素，顏色代碼使用color：；設(shè)置顏色為#fff（白色），使用代碼font-weight:bolder ;使得文本加粗。

成品展示：

完整代碼：

HTML:

CSS：