1瑞佩、背景顏色-background-color
在CSS中复旬，使用background-color屬性來控制元素的背景顏色慨飘。
默認值：transparent 某残，即背景是透明的代咸。
1）使用關(guān)鍵字
關(guān)鍵字指的就是顏色的英文名稱蹈丸，如red、blue、green等逻杖。
2）使用16進制
十六進制顏色是這樣規(guī)定的：#RRGGBB奋岁，其中的 RR（紅色）、GG（綠色）荸百、BB（藍色）十六進制整數(shù)規(guī)定了顏色的成分闻伶。所有值必須介于 0 與 FF 之間。
3）使用RGB 顏色
RGB 顏色值是這樣規(guī)定的：rgb(red, green, blue)管搪。每個參數(shù) (red虾攻、green 以及 blue) 定義顏色的強度，可以是介于 0 與 255 之間的整數(shù)更鲁，或者是百分比值（從 0% 到 100%）霎箍。
4）使用RGB 顏色
RGBA 顏色值是 RGB 顏色值的擴展，帶有一個 alpha 通道 - 它規(guī)定了對象的不透明度澡为。
所以透明可以寫成transparent或者rgba(X, X, X, 0)
2漂坏、背景圖像-background-image
background-image:url(images/1.jpg);
CSS背景圖像常用屬性
| 屬性 | 說明 |
|---|---|
| background-repeat | 定義背景圖像是否重復(fù) |
| background-position | 定義背景圖像在元素哪個位置 |
| background-attachment | 定義背景圖像是否隨內(nèi)容而滾動 |
| background-size | 定義背景圖片的大小 |
| background-origin | 規(guī)定背景圖片的定位區(qū)域 |
| background-clip | 將背景圖片根據(jù)實際需要進行剪切 |
1）background-repeat
語法：
background-repeat：<repeat-style> [ , <repeat-style> ]*
- <repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2}
默認值：repeat
| 屬性 | 說明 |
|---|---|
| repeat | 默認值，表示在水平方向（x軸）和垂直方向（y軸）同時平鋪 |
| no-repeat | 表示不平鋪 |
| repeat-x | 表示在水平方向（x軸）平鋪 |
| repeat-y | 表示在垂直方向（y軸）平鋪 |
| space | 背景圖像以相同的間距平鋪且填充滿整個容器或某個方向 |
| round | 背景圖像自動縮放直到適應(yīng)且填充滿整個容器 |
** space效果圖**：
** round效果**：
2）background-position
語法：
** background-position *：<position> [ , <position> ]
- <position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
默認值：0% 0%媒至，效果等同于left top
background-position的取值有3種顶别，像素值、關(guān)鍵字拒啰、百分比
(1) 像素值
background-position:80px 40px;
(2) 關(guān)鍵字
| 屬性 | 說明 |
|---|---|
| top left | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
(3) 百分比
background-position:50% 50%;
考試遇到的坑驯绎，主要沒看清題目意思。谋旦。
（多選）已知一個元素做了以下設(shè)置：width:100px; height:100px; padding:10px; background:url(x.png) no-repeat;請問增加以下哪些CSS可以改變這張背景圖的位置剩失？
A.background-position:0 0;
B.background-position:0% 0%;
C.background-position:50% 50%
D.background-position:0%;
答案：CD
當時看成了哪些屬性可以設(shè)置position的位置，然后選擇了ABCD
而實際background-position默認在左上角册着，也就是A和B都是一個意思拴孤，默認在左上角的，還有top left 甲捏。題目考的是哪個屬性可以改變位置演熟，所以選CD。
注意：background-position如果只指定了一個值司顿，那么另外一個值就是center或者50%芒粹。
3）background-attachment
在CSS中，使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對象滾動還是固定不動大溜。
語法：
background-attachment：<attachment> [ , <attachment>]*
- <attachment> = fixed | scroll | local
默認值：scroll
| 屬性 | 說明 |
|---|---|
| fixed | 背景圖像相對于窗體固定化漆。 |
| scroll | 背景圖像相對于元素固定，也就是說當元素內(nèi)容滾動時背景圖像不會跟著滾動猎提，但會隨元素的祖先元素或窗體一起滾動。 |
| local | 背景圖像相對于元素內(nèi)容固定，也就是說當元素隨元素滾動時背景圖像也會跟著滾動锨苏。（CSS3） |
借鑒一下別人的解釋：
這是一個元素P疙教。當你的指針在P外時，滾動的是P本身伞租。當你的指針在P內(nèi)時贞谓，滾動的是P的內(nèi)容。也就是說葵诈，當你滾動P本身時裸弦，local和scroll，背景都會隨P的位置滾動作喘，fixed不會理疙。
而當你滾動P的內(nèi)容時，scroll背景不會隨滾動而滾動泞坦，local則會隨滾動而滾動窖贤。
4）background-size
在CSS3中，我們可以使用background-size屬性來設(shè)置背景圖片的大小贰锁，這使得我們可以在不同的環(huán)境中重復(fù)使用背景圖片赃梧。
語法：
background-size : auto | <長度值> | <百分比> | cover | contain
background-size的值同樣有三種表現(xiàn)形式
(1) 關(guān)鍵字
| 關(guān)鍵字 | 說明 |
|---|---|
| cover | 即“覆蓋”，將背景圖片以等比縮放來填充整個容器元素 |
| contain | 即“容納”豌熄，將背景圖片等比縮放至某一邊緊貼容器邊緣為止 |
| auto | 默認值授嘀，不改變背景圖片的原始高度和寬度 |
(2) 像素值
background-size : 50px 50px;
將背景圖片寬、高依次設(shè)置為50px
如果只設(shè)置一個值時锣险，那么就將該值作為圖片寬度值來等比縮放
(3) 像素值
0％~100％之間的任何值蹄皱，將背景圖片寬高依次設(shè)置為所在元素寬高乘以百分比得出的數(shù)值
坑之所在
百分比的參照并不是圖片本身，而是圖片的容器囱持。
舉個栗子夯接，一張100px100px的圖片作為200px300px容器的背景圖，設(shè)置background-size：50% 50%纷妆，辣么圖片最終大小為100px*150px盔几，不但沒有縮小成原本大小的50%，反而會變大掩幢！還可能產(chǎn)生拉伸的效果逊拍。
如果只設(shè)置一個值，如background-size：50%际邻，辣么圖片的寬為200px*50%=100px芯丧，高度按寬度等比例縮放，寬度沒變世曾，所以圖片大小不會變缨恒。
5）background-origin
在CSS3中，我們可以使用background-origin屬性來設(shè)置元素背景圖片顯示的最開始位置。
語法：background-origin ： border-box | padding-box | content-box;
| 屬性值 | 說明 |
|---|---|
| border-box | 表示背景圖片是從邊框開始顯示 |
| padding-box | 表示背景圖片是從內(nèi)邊距開始顯示（默認值） |
| content-box | 表示背景圖片是從內(nèi)容區(qū)域開始顯示 |
效果如下：
注意：
- 如果背景不是no-repeat骗露，這個屬性無效岭佳，它會從邊框開始顯示。
- 當background-attachment設(shè)置為fixed時萧锉，這個屬性無效珊随，從邊框開始顯示，設(shè)置為scroll或者local時柿隙，默認從內(nèi)邊距開始顯示叶洞。
6）background-clip
在CSS3中，使用background-clip屬性來將背景圖片根據(jù)實際需要進行剪切禀崖。
語法：background-clip ： border-box | padding-box | content-box | no-clip
| 屬性值 | 說明 |
|---|---|
| border-box | 默認值衩辟，表示從邊框border開始剪切 |
| padding-box | 表示從內(nèi)邊距padding開始剪切 |
| content-box | 表示從內(nèi)容區(qū)域content開始剪切 |
| No-clip | 不裁切，和參數(shù)border-box顯示同樣的效果 |
background-clip默認值為border-box帆焕。
效果如下圖所示：
background-clip屬性指定了背景在哪些區(qū)域可以顯示惭婿，但與背景開始繪制的位置（即background-origin屬性）無關(guān)。背景繪制的位置可以出現(xiàn)在不顯示背景的區(qū)域叶雹。這就相當于背景圖片被不顯示背景的區(qū)域裁剪了一部分一樣财饥。
總結(jié)：background
我們可以將上面總結(jié)的屬性寫在一個聲明中。
語法縮寫如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],…
注意
- 如果有 size 值折晦，需要緊跟 position 并且用 “/” 隔開钥星；
- 如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個）满着，表明所有背景圖片應(yīng)用該屬性值谦炒。
- background-color 只能設(shè)置一個。
最后风喇，CSS3對background定義了兩種漸變方式：線性漸變（linear-gradient）和徑向漸變（radial-gradient）宁改，內(nèi)容較多，這里不做詳解魂莫。
學(xué)習(xí)筆記如有錯誤还蹲，歡迎指正。
