iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
4
Modern Web

金魚都能懂的CSS必學屬性系列 第 15

Background-color - 金魚都能懂的CSS必學屬性

Background-color 的規則

background-color基本上僅需指定一個值,其撰寫方式像是這樣

Background-color: red;

Background-color的作用是設定背景的色彩,其中設定的值有多種方式,其中可以設定的值有

  • 16進位碼的色彩表示(Hex)
  • RGB色彩表示法
  • RGBA色彩表示法
  • HSL色彩表示法
  • HSLA色彩表示法
  • 色彩關鍵字

其中「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
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的Bootstrap5網頁框架開發

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Font- 金魚都能懂的CSS必學屬性
下一篇
Background-image 之一 - 金魚都能懂的CSS必學屬性
系列文
金魚都能懂的CSS必學屬性31

尚未有邦友留言

立即登入留言