大家好ヽ( o???)?。隨便寫寫哈。

background-color 屬性

首先從最簡(jiǎn)單的開始，設(shè)置背景的顏色值。

初始值: transparent
是否繼承屬性: 否

關(guān)于繼承可能有同學(xué)不是很懂，這里附注簡(jiǎn)單理解一下：
我們都知道html標(biāo)簽都是層層嵌套的，我給外層設(shè)置了屬性，而內(nèi)層也被應(yīng)用了這個(gè)屬性，那么這個(gè)屬性就是繼承的。
繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于特定的html標(biāo)簽元素，而且應(yīng)用于其后代元素。

屬性值

1. transparent：默認(rèn)值。指定背景顏色應(yīng)該是透明的。其實(shí)這個(gè)屬性大部分情況下并不會(huì)使用。
2. color：指定背景顏色。
   • 預(yù)定義的顏色名稱： 規(guī)定顏色值為顏色名稱的顏色（比如 red）。
   • 十六進(jìn)制顏色：規(guī)定顏色值為十六進(jìn)制值的顏色（比如 #ff0000）。
   • RGB顏色： 規(guī)定顏色值為 rgb 代碼的顏色（比如 rgb(255,0,0)）。
   • RGBA顏色：RGBA顏色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。RGBA顏色值是RGB顏色值alpha通道的延伸 - 指定對(duì)象的透明度。RGBA（紅，綠，藍(lán)，alpha）。Alpha參數(shù)是一個(gè)介于0.0（完全透明）和1.0（完全不透明）之間的參數(shù)。
   • HSL顏色：IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL顏色值。HSL（色調(diào)，飽和度，明度）。（比如hsl(120,65%,75%)）。
   • HSLA顏色：HSLA顏色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。HSLA的顏色值是一個(gè)帶有alpha通道的HSL顏色值的延伸 - 指定對(duì)象的透明度。HSLA（色調(diào)，飽和度，亮度，alpha）。
3. 特殊的關(guān)鍵字。很有趣的關(guān)鍵字currentColor。(????)
   • currentColor：css3的屬性?？梢蕴鎿Q使用到顏色值的地方，意思是當(dāng)前顏色，確切的說是當(dāng)前的標(biāo)簽所繼承的文字顏色。currentColor = color的值。
4. 繼承。同樣使用的不多，但是合理的運(yùn)用繼承又能使CSS 代碼更加符合 DRY（Don't Repeat Yourself 避免重復(fù)代碼）原則。
   • inherit：繼承。規(guī)定背景顏色從父元素繼承。
   • initial：IE 不支持該關(guān)鍵字。默認(rèn)。
   • unset：不設(shè)置。如果該屬性是默認(rèn)繼承屬性，該值等同于 inherit，如果該屬性是非繼承屬性，該值等同于 initial。background-color 為非繼承屬性，所以現(xiàn)在相當(dāng)于 initial。

使用示例

background-color: red; /* Keyword */
background-color: #bbff00; /* Hexadecimal */
background-color: rgb(255, 255, 128); /* RGB */
background-color: hsla(50, 33%, 25%, 0.75); /* HSLA */
background-color: transparent; /* Special keyword */
background-color: inherit; /* Global values */
background-color: initial; /* Global values */
background-color: unset; /* Global values */
background-color: currentColor; /* Special keyword */

指定顏色值
currentColor的使用

background-image 屬性

設(shè)置一個(gè)元素的背景圖像，可以設(shè)置一個(gè)或者多個(gè)背景圖像。但是注意，如果一個(gè)指定的圖像無法被繪制 (比如，被指定的 URI 所表示的文件無法被加載)，瀏覽器會(huì)將此情況等同于其值被設(shè)為 none。

默認(rèn)情況下，background-image放置在元素的左上角，并重復(fù)垂直和水平方向。

初始值: none
是否繼承屬性: 否

屬性值

每個(gè)背景圖像被明確規(guī)定為關(guān)鍵字 none 或是一個(gè) <image>值。

1. none：默認(rèn)值。不顯示背景圖像。
2. <image>值：url('URL')。指向圖像的路徑。
3. 繼承：見 background-color 屬性，這里不重復(fù)介紹。
4. 漸變屬性：CSS3的屬性。
   • linear-gradient() 函數(shù)：創(chuàng)建一個(gè)線性漸變的 "圖像"(從上到下)。（例如 linear-gradient(red, yellow, blue)。從頭部開始的線性漸變，從紅色開始，轉(zhuǎn)為黃色，再到藍(lán)色。）
   • radial-gradient() 函數(shù)：用徑向漸變創(chuàng)建 "圖像"。
   • ** repeating-linear-gradient() 函數(shù)**：重復(fù)的線性漸變 "圖像"。
   • ** repeating-radial-gradient() 函數(shù)**：重復(fù)的徑向漸變 "圖像"。

使用示例

/* 單個(gè)背景圖 */
background-image: url("../../media/examples/aaa.png");
/* 多個(gè)背景圖 */
background-image: url("../../media/examples/lizard.png"),
                  url("../../media/examples/star.png");
/* 漸變色*/
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../../media/examples/lizard.png");

背景圖設(shè)置

background-repeat 屬性

定義背景圖像的重復(fù)方式。背景圖像可以沿著水平軸，垂直軸，兩個(gè)軸重復(fù)，或者根本不重復(fù)。

默認(rèn)情況下，重復(fù)的圖像被剪裁為元素的大小，但它們可以縮放 (使用 round) 或者均勻地分布 (使用 space)。

初始值: repeat
是否繼承屬性: 否

屬性值

1. repeat：默認(rèn)值，背景圖像將向垂直和水平方向重復(fù)。
2. repeat-x：只有水平位置會(huì)重復(fù)背景圖像。
3. repeat-y：只有垂直位置會(huì)重復(fù)背景圖像。
4. no-repeat：background-image不會(huì)重復(fù)。
5. space：背景圖不會(huì)縮放，會(huì)被裁切。
6. round：縮放背景圖至容器大小。
7. 繼承：見 background-color 屬性，這里不重復(fù)介紹。

使用示例

/* 單值語法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;

/* 雙值語法：水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/* 繼承*/
background-repeat: inherit;

背景圖像的重復(fù)方式

background-position 屬性

為每一個(gè)背景圖片設(shè)置初始位置。

這個(gè)位置是相對(duì)于由 background-origin（css3的屬性） 定義的位置圖層的。

初始值: 0% 0%
是否繼承屬性: 否

屬性值

1. <position>值：定義一組 x/y 坐標(biāo)（相對(duì)于一個(gè)元素盒子模型的邊緣），來放置這個(gè)item。它可以被定義為一個(gè)值或者兩個(gè)值，水平和垂直的位置。如果僅指定一個(gè)值，其他值將會(huì)是 center 。
   • top, left, bottom, right。用來指定把這個(gè)item 放在哪一個(gè)邊緣。
   • 關(guān)鍵字 center，用來居中背景圖片。
   • length（px），percentage（百分比）。指定相對(duì)于左邊緣的 x 坐標(biāo)，y 坐標(biāo)的位置。
2. 繼承：見 background-color 屬性，這里不重復(fù)介紹。

百分比值的偏移指定圖片的相對(duì)位置和容器的相對(duì)位置重合。值0%代表圖片的左邊界（或上邊界）和容器的左邊界（上邊界）重合。值100%代表圖片的右邊界（或下邊界）和容器的右邊界（或下邊界）重合。值50%則代表圖片的中點(diǎn)和容器的中點(diǎn)重合。

使用示例

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
background-position: 10px 8px;

/* Edge offsets values */
background-position: bottom 10px right 20px;

/* Multiple images */
background-position: 0 0, center;

/* Global values */
background-position: inherit;

背景圖片設(shè)置初始位置

background-attachment 屬性

設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。

初始值: scroll
是否繼承屬性: 否

屬性值

1. scroll：默認(rèn)值。背景圖片隨著頁面的滾動(dòng)而滾動(dòng)。
2. fixed：此關(guān)鍵屬性值表示背景相對(duì)于視口固定。背景圖片不會(huì)隨著頁面的滾動(dòng)而滾動(dòng)。
3. local：此關(guān)鍵屬性值表示背景相對(duì)于元素的內(nèi)容固定。背景圖片會(huì)隨著元素內(nèi)容的滾動(dòng)而滾動(dòng)。
4. 繼承：見 background-color 屬性，這里不重復(fù)介紹。

使用示例

background-attachment: fixed;
background-attachment: scroll;
background-attachment: local;
background-attachment: local, scroll;

背景圖像是否固定

background 屬性

背景縮寫屬性可以在一個(gè)聲明中設(shè)置所有的背景屬性。

可以設(shè)置的屬性分別是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment 和 background-image。

各值之間用空格分隔，不分先后順序。

是否繼承屬性: 否

使用示例

background: green;
background: no-repeat url("aaa.png");
background: #00ff00 url('aaa.gif') no-repeat fixed center; 

背景縮寫屬性

總結(jié)

image.png

結(jié)束語

來呀，快活呀，反正有大把時(shí)光～