background-color基本上僅需指定一個值，其撰寫方式像是這樣
Background-color: red;
Background-color的作用是設定背景的色彩，其中設定的值有多種方式，其中可以設定的值有
其中「16進位碼色彩表示法、RGB色彩表示法、HSL色彩表示法」各位可以至我之前寫的RGB、HSL、Hex 網頁色彩碼，看完這篇全懂了文章中看看，裡面有非常詳盡的介紹，而「RGBA」以及「HSLA」則是在RGB色彩表示法後面增加一個不透明度的alpha值設定，同樣不是很難理解。
以上可以發現大概內容就跟之前寫的「Color - 金魚都能懂的CSS必學屬性」是一樣的，對！就是一樣的啊(又來騙稿了，被打)！所以可以設定的值的寫法，請各位直接去看「Color - 金魚都能懂的CSS必學屬性」，這邊就不騙稿復述了。
既然基本上所有的設定值都跟「Color - 金魚都能懂的CSS必學屬性」是一樣的，那麼我們又需要注意什麼呢？目前許多人都很喜歡漸層背景這樣的設計，而許多人也因為漸層色的關係而認為漸層背景是背景色彩(background-color)，但實際上漸層色彩是背景圖片(background-image)而非背景色(background-color)，對！不要懷疑！漸層是背景圖，所以會發現撰寫CSS transition動畫的時候，背景圖其實是不會有色彩變化動畫，那如果你有看到淡入淡出的動畫的話，~~不可能！那一定是你眼睛業障重！~~那其實是Chrome本身的問題，換個Firefox就看不到動畫了(謎：Firefox讓我眼睛沒業障)。
註：Chrome可以看到動畫其實是有原因的，但這樣其實不合理，這部分將會在後面的文章中再撰寫。
基本上一個物件的背景色只能設定一個，聽起來就是個廢話！但實際上圖片卻能設定多個，所以...不是廢話，而是一個需要注意的基本觀念啦，然而要注意的是，如果同時設定了背景色彩與背景圖片，背景圖片會蓋住背景色，所以設定時需要特別注意，也可以利用這樣的方式來做到一些設計上面的變化。
background-color可支援CSS transition 製作動畫效果，會有色彩上面的轉變，所以普遍也有利用這種特性來製作網頁上滑鼠觸摸到的時候的效果，另外特別可以注意到的是，關鍵字 transparent(透明)也能支援CSS transition色彩的轉換動畫喔，大家可以放心快樂的用這關鍵字來做一些有趣的動畫效果了。
「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧
Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
iThome鐵人賽
看影片追技術