CSS的背景可以為元素添加背景顏色（background-color）和背景圖片(backgroud-image), CSS3也提供了背景使用多張圖片和漸變色的功能。
CSS背景屬性
- background-color：設(shè)置元素的背景顏色。
- background-image：把圖像設(shè)置為背景。
- background-repeat：設(shè)置背景圖像是否及如何重復(fù)。
- backgroud-position：設(shè)置背景圖像的起始位置。
- background-size：設(shè)置背景圖片大小。
- background-attachment：背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。
- background：(簡(jiǎn)寫屬性)作用是將背景屬性設(shè)置在一個(gè)聲明中。
-
background-clip, background-origin,background-break(目前尚未得到廣泛支持)
更多可參考MSDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
背景顏色
語法：
div{background-color:'red'}
div{background-color:rgb(255,0,0)}
div{background-color:rgba(255,0,0,0.5)}
至于顏色的的可選值可以參看《CSS簡(jiǎn)介》顏色值一節(jié)。
示例：
背景圖片
語法：
background-image:url('url');
示例：
background-image:url('https://www.baidu.com/img/flexible/logo/pc/result.png');
從示例中可以看出，默認(rèn)是水平垂直重復(fù)，那么如何控制背景重復(fù)呢？
背景重復(fù)
語法：
background-repeat:no-repeat;
background-repeat-x:no-repeat;
background-repeat-y:no-repeat;
示例：
背景位置
除此之外，還可以設(shè)置背景的起始位置。
語法：
background-position:position;
background-position 屬性有5個(gè)關(guān)鍵字值，分別是top 、 left 、 bottom 、 right 和 center，這些關(guān)鍵字中的任意兩個(gè)組合起來都可以作為該屬性的值。
背景尺寸
語法：
background-size:50%;
background-size:100px 50px; // 寬100，高50
background-size:cover; // 拉大圖片，完全填滿，保持寬高比
background-size:contain; // 縮放圖片，使其恰好適合背景區(qū)，保持寬高比
示例：
背景粘附
background-attachment 屬性控制滾動(dòng)元素內(nèi)的背景圖片是否隨元素滾動(dòng)而移動(dòng)。這個(gè)屬性的默認(rèn)值是scroll ，即背景圖片隨元素移動(dòng)。如果把它的值改為 fixed ，那么背景圖片不會(huì)隨元素滾動(dòng)而移動(dòng)。
示例：
背景簡(jiǎn)寫
background 簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有的背景屬性。
可以設(shè)置如下屬性：
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
示例：
background:url('https://www.baidu.com/img/flexible/logo/pc/result.png') no-repeat center ;
多背景圖片
語法：
background:
url('') no-repeat 10px 0px...,
url('') no-repeat 10px 60px...,
url('') no-repeat 10px 120px...;
背景漸變
漸變分兩種，一種線性漸變，一種放射性漸變。線性漸變從元素的一端延伸到另一
端，放射性漸變則從元素內(nèi)一點(diǎn)向四周發(fā)散。
線性漸變語法:
/* 漸變軸為45度，從藍(lán)色漸變到紅色 */
linear-gradient(45deg, blue, red);
/* 從右下到左上、從藍(lán)色漸變到紅色 */
linear-gradient(to left top, blue, red);
/* 從下到上，從藍(lán)色開始漸變、到高度40%位置是綠色漸變開始、最后以紅色結(jié)束 */
linear-gradient(0deg, blue, green 40%, red);
更多可參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient()
放射性漸變語法：
background: radial-gradient(#e66465, #9198e5);
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
background: radial-gradient(ellipse at top, #e66465, transparent),
radial-gradient(ellipse at bottom, #4d9f0c, transparent);
更多可參考：https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()
其他屬性
- background-clip ?？刂票尘袄L制區(qū)域的范圍，比如可以讓背景顏色和背景圖片只出現(xiàn)在內(nèi)容區(qū)，而不出現(xiàn)在內(nèi)邊距區(qū)域。默認(rèn)情況下，背景繪制區(qū)域是擴(kuò)展到邊框外邊界的。
- background-origin ?？刂票尘岸ㄎ粎^(qū)域的原點(diǎn)，可以設(shè)定為元素盒子左上角以外的位置。比如，可以設(shè)定以內(nèi)容區(qū)左上角作為原點(diǎn)。
- background-break 。 控制分離元素（比如跨越多行的行內(nèi)盒子）的顯示效果。
