[TOC] >[info] CSS 允許應用純色作為背景，也允許使用背景圖像創建相當復雜的效果。 ### 1、背景色 >[danger]可以使用 background-color屬性為元素設置背景色。這個屬性接受任何合法的顏色值。 這條規則把元素的背景設置為灰色： ~~~ p {background-color: gray;} p {background-color: #fff;} p {background-color: rgb(0,0,0);} p {background-color: rga(0,0,0,0);} ~~~ ### 2、背景圖像 >[danger]要把圖像放入背景，需要使用 background-image 屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。 如果需要設置一個背景圖像，必須為這個屬性設置一個 URL 值： ~~~ body {background-image: url(/i/eg_bg_04.gif);} ~~~ ### 3、 背景重復 >[danger]如果需要在頁面上對背景圖像進行平鋪，可以使用 background-repeat 屬性。 屬性值 repeat 導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復，no-repeat 則不允許圖像在任何方向上平鋪。 默認地，背景圖像將從一個元素的左上角開始。請看下面的例子 ~~~ body{ background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; } ~~~ ### 4、背景定位(圖片精靈) >[danger]可以利用 background-position 屬性改變圖像在背景中的位置。 下面的例子在 body 元素中將一個背景圖像居中放置： ~~~ body { background-image:url("/i/eg_bg_03.gif"); background-repeat:no-repeat; background-position:center; /*位置(top,center,bottom,right,left)*/ /*百分數值(50% 50%;)*/ /*長度值(50px 100px)*/ } ~~~ ### 5、css背景縮寫 ~~~ <style type="text/css"> p{background: #fff url() 0 0 no-repeat;} </style> ~~~ >[danger]**作業：**通過背景精靈，完成京東右下角工具導航的布局。