background:color url() repeat fixed top;1.background-color：；——背景顏色（預設transparent透明）
2.backgrounf-image：url（）；——背景
3.背景平鋪：background-repeat：repeat-x（沿x軸平鋪）
repeat-y（沿y軸平鋪）
no-repeat（不平鋪）
4.背景位置：background-posision
5.背景滾動：background-attchament：預設為scroll滾動 | fixed為固定 注：背景顏色透明：background：rgba（0，0，0，0.5）；
6.背景顏色漸變：background：linear-grantent（起始位置，顏色1，顏色2）
7.背景縮放background-size ①background-size：的寬度 的高度；（空格隔開） ②只寫乙個引數即寬度，高度自動省略，等比縮放 ③裡面的單位可以跟%，相對父盒子來說
④cover：要擴大到足夠大，使得完全覆蓋盒子，因此部分背景顯示不全
⑤contain：高度和寬度等比拉伸，當其中乙個鋪滿後就不再拉伸了，因此會有部分空白
構思：首先為整體設定個盒子，清除整體的浮動。整體寬750px，高480px，可以用backgrou-image設定為背景；由於的寬高與盒子的寬高一致，因此無需設定backgroud-repeat背景圖的平鋪。
標題h2與頂部要有60px的空隙，就要用到padding-top上內邊距的樣式設定。（複習：padding定義內邊距時，必須按照順時針賦值，乙個值為4個邊；兩個值為上下/左右；三個值為上/左右/下）
內容要求顯示時不透明度為0.3，需要使用opacity，列與列之間有空隙，使用line-height設定行間距即可。滑鼠懸停改變樣式是鏈結偽類:hover的功能。要求底部內容與文字內容不一起實現偽類，要求全部文字設定< p>標籤，底部文字再設定乙個< \p>標籤。
**部分：
首先先寫body部分，再設定賦值。
接下來清除浮動的影響< body>< div>
< h2>水調歌頭< /h2>
< p>明月幾時有？把酒問青天。< br/>
不知天上宮闕，今夕是何年。< br/>
我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。< br/>
起舞弄清影，何似在人間。< br/>
轉朱閣，低綺戶，照無眠。< br/>
不應有恨，何事長向別時圓？< br/>
人有悲歡離合，月有陰晴圓缺，此事古難全。< br/>
但願人長久，千里共嬋娟。< /p>
< p class="citt">——蘇軾< /p>
< /div>
< /body>
給整體的盒子div設定引數body給h2設定引數div給p和.citt設定引數h2設定鏈結偽類p.citt
遇到的問題：p:hover使用body清除浮動時背景與網頁頂部的空隙始終去不掉；使用*清除時又會把p的浮動清除，使得h2和p標籤之間緊挨著，視覺效果不美觀，檢視到那塊浮動是h2的，給h2設定margin:0;即可。
構思：這道題考察的是多重背景的設定。由於只需要設定背景圖及其出現的位置，故body區只需要設定乙個div盒子即可。
複習一下：
多重背景的設定為
background-image: （選擇所要的背景圖）
background-repeat: no-repeat;（設為不平鋪）
background-position: （設定其位置，要求與選擇的背景圖的順序一致）
**：body區只需要設定乙個盒子容器即可。
首先給整體清除浮動< body>< div>
< /body>
然後設定多重背景及其位置body構思：首先清除浮動的影響，margin:0;padding:0;
設定和字的大小，寬300px，高200px。背景顏色需要設定成漸變效果，就要用到background-image: linear-gradient。【複習一下background-image: linear-gradient的用法：background-image: linear-gradient（角度值，顏色1，顏色2，···，顏色n）】
由於高度為200px，5個li平均分下來每個li是40px，要想使得文字高度居中，只需要line-height:40px;即可。要想實現列表項和專案符號之間的間隔，就要用到text-indent屬性。
設定為背景，backgroud-repeat:no repaet;背景不平鋪，想為背景設定位置，需要用上backgroud-position屬性。
**：第一步，先寫body區
清除浮動帶來的影響< body>< div>
< ol>
< li class="up">李榮浩-我愛你< /li>
< li class="down">蘇譚譚-這扯淡的人生< /li>
< li class="up">蔣蔣、曲肖冰-當真< /li>
< li class="down">海來阿木-遠方有信仰< /li>
< li class="up">譚詠麟-再見亦是淚< /li>
< /ol>
< /div>
< /body>
設定盒子的大小、背景顏色body設定列表項元素div設定每條列表項末尾的li複習一下：backgroud-position屬性的取值li.upli.down
①使用不同單位的數值，直接設定影象左上角在元素中的座標。
②使用預定關鍵字：指定影象在元素中的對齊方式。
·水平方向值：left、center、right
·垂直方向值：top、center、bottom
③使用百分比
參考文章：
背景顏色漸變
css3 漸變 gradient 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。以前，你必須使用影象來實現這些效果，現在通過使用 css3 的漸變 gradients 即可實現。此外，漸變效果的元素在放大時看起來效果更好，因為漸變 gradient 是由瀏覽器生成的。1 語法 backgroun...
背景顏色漸變
專門做漸變顏色的 這種漸變色，瀏覽器要當做背景解析的，所以應該給background image 引數1 漸變的方向 to 乙個方向 還可以寫角度,0deg在正下，值越大，越順時針旋轉 後面的引數是顏色，至少2個顏色，顏色要 2 第乙個顏色後面寫乙個百分比，代表在什麼位置結束 後面的顏色再寫百分比，...
bachground image背景漸變筆記
background image的衍生 漸變,用的不是很多 之間ps多好,費這事兒 1。漸變 按鈕的背景，線性，徑向，重複漸變 配合background size 30 100 實現進度條填充,美滋滋 漸變語法 background image 取值 linear gradient value 線性...