CSS定位元素--背景

CSS 裏也同樣，每一個元素盒子均可以想象成由兩個圖層組成。元素的前景層包含內容（如文本或圖片）和邊框，元素的背景層能夠用實色填充（使用background-color 屬性），也能夠包含任意多個背景圖片（使用background-image 屬性），背景圖片疊加在背景顏色之上。

CSS背景屬性

  background-color

  background-image

background-repeat

background-position

background-size

background-attachment

background（簡寫屬性）

background-clip、 background-origin、 background-break（目前還沒有獲得普遍支持）

背景顏色

background-color 是背景屬性中最簡單的，經過它能夠設定元素的顏色。而後，元素就會以設定的顏色填充背景圖層

背景圖片

background-image:url(圖片路徑/圖片文件名)

背景重複

控制背景重複方式的 background-repeat 屬性有 4 個值。默認值就是 repeat。repeat-x、repeat-y、 no-repeat

背景粘附

background-attachment 屬性控制滾動元素內的背景圖片是否隨元素滾動而移動。這個屬性的默認值是 scroll，即背景圖片隨元素移動。若是把它的值改成 fixed，那麼背景圖片不會隨元素滾動而移動。

background-attachment:fixed 最經常使用於給 body 元素中心位置添加淡色水印，讓水印不隨頁面滾動而移動。

簡寫背景屬性

body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}

聲明中少寫了哪一個屬性的值（好比沒寫 no-repeat），就會使用相應屬性的默認值（repeat）。

多背景圖片

p {
    height:150px;
    width:348px;
    border:2px solid #aaa;
    margin:20px auto;
    font:24px/150px helvetica, arial, sansserif;
    text-align:center;
    background:
        url(images/turq_spiral.png) 30px -10px no-repeat,
        url(images/pink_spiral.png) 145px 0px no-repeat,
        url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;
}

在 CSS 中，我把每張圖片的聲明都單獨放在了一行裏，以逗號分隔，以便看清它們的位置、重複的設定值。爲了防止圖片加載失敗時元素背景處於默認的透明狀態，這裏也在最後一條聲明中加上了背景顏色（加粗的值）。要注意的是，代碼中先列出的圖片顯示在上方，或者說，更接近前景。

背景漸變

<div class='gradient1'></div>
<div class='gradient2'></div>
<div class='gradient3'></div>
CSS 規則以下。
/*爲元素盒子添加樣式*/
div {
height:150px;
width:200px;
border:1px solid #ccc;
float:left;
margin:16px;
}
/*例 1：默認爲從上到下*/
.gradient1 {
background:linear-gradient(#e86a43, #fff);
}
/*例 2：從左到右*/
.gradient2 {
background:linear-gradient(to left, #64d1dd, #fff);
}
/*例 3：左上到右下*/
.gradient3 {
background:linear-gradient(-45deg, #e86a43, #fff);
}

/*例 1： 50%處有一個漸變點*/
.gradient1 {
background:linear-gradient(#64d1dd, #fff 50%, #64d1dd);
}
/*例 2： 20%和 80%處有兩個漸變點*/
.gradient2 {
background:linear-gradient(#e86a43 20%, #fff 50%, #e86a43 80%);
}
/*例 3： 25%、 50%、 75%處有三個漸變點*/
.gradient3 {
background:linear-gradient(#64d1dd, #fff 25%, #64d1dd 50%, #fff 75%,
#64d1dd);
}
/*例 4：爲同一個漸變點設定兩種顏色能夠獲得突變效果*/
.gradient4 {
background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%,
#fff 75%, #e86a43);
}

參考：http://css.doyoe.com/  （章節：取值與單位---》圖像---》linear-gradient()）