前端工程師必學CSS背景五個常識(四)-如何設定背景顏色?

-

前端工程師必學CSS背景五個常識(四)-如何設定背景顏色?


背景顏色設定對前端工程師來說也超重要!所有技能都學完了,你就能獲得滿滿的競爭力!


使用背景顏色設定 (background-color)屬性，前端工程師可利用之，讓簡潔的純色背景襯托出網頁的主體，也可決定網頁的風格。像是背景純黑的網頁，與背景為粉紅色的網頁，風格就大不相同。其實 background-color 能夠使用的範圍除了網頁背景色外，也可以讓前端工程師用來設計表格、DIV 區塊、span 等網頁元素的背景顏色。

 

CSS background-color 基本語法如下：

background-color: 顏色名稱或色碼 ;
background-color 可以使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼，挑選顏色請參考：網頁顏色代碼對照表。

CSS background-color 語法範例一、網頁背景

html{background-color: 顏色名稱或色碼 ;}
See the Pen background-color-bg-example by Tedutw (@Tedutw) on CodePen.


CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色

div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;}
See the Pen background-color-div-example by Tedutw (@Tedutw) on CodePen.


同樣的技巧還可用在其他的網頁元素，若想採用圖片當成背景，請參閱：2. 背景圖樣設定 (background-image)。



其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)



延伸閱讀：

前端工程師必學CSS背景五個常識(二)-如何讓背景固定住?

前端工程師必學CSS背景五個常識(三)-如何設定背景位置?

前端工程師必學CSS背景五個常識(五)-如何設定背景圖樣?

透過SEO優化,自己當網站守門員

前端工程師必須知道的第一課-CSS

在家也可以輕鬆學程式?!微軟推出簡易版Python課程軟件!

NOWnews 今日新聞

這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

-
圖片
關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦! 關於Python-while 迴圈 Python 的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。 Python 的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。 while 迴圈構成，包含了 。 以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。 這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下： i = 1 #初始值 while i <=5: #讓迴圈結束的條件 print(i) i = i + 1 #更新值 (調整) 則結果為： 1 2 3 4 5 >>> while迴圈的「infinite loop(無限循環)」 Python 的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。 「infinite loop(無限循環)」的範例如下： while 7==7: print("這是無限循環迴圈") 結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。 若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。 以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！ x=1 >>> while x>0: print(x) x+2 結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是
閱讀完整內容

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

-
圖片
想成為前端工程師?那CSS中最基本的逗號.空格再搞錯,豈不是太不專業了! 有時在 HTML 中， 前端工程師 們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示: < div class = " first second " > </ div > 對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎? /*1. 兩個 class 中有空格*/ .first .second /*2. 兩個 class 中沒有空格*/ .first.second /*3. 兩個 class 中出現逗號*/ .first,.second 對於 CSS 及前端工程師的初學者來說，上述三種 CSS 因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：   1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有空格的例子 by Tedutw ( @Tedutw ) on CodePen . 2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間無空格的例子 by Tedutw ( @Tedutw ) on CodePen . 3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有逗號的例子 by Tedutw ( @Tedutw ) on CodePen . 註 : 以上三個範例的 HTML 碼都一樣 延伸閱讀： 前端工程師入門款小常識-CSS碼特性一下就上手! 
閱讀完整內容

沒想到人工智慧的辨識功能已經這麼厲害了!?還不快來瞧瞧!

-
圖片
雖然大家都知道人工智慧一直在進步,但要是沒看到這篇文章,我也不會知道它的辨識功能這麼進步了! 今天 Python 課程 的老師提到： 人工智慧 ( AI ) 已經應用到很多專業的產業中，如 醫療 、 咖啡 、 零售 、 人臉合成 、 養殖業 、 無人駕駛 、 救流浪貓 等等。 Google 也展現了將 人工智慧 技術帶入日常生活的決心，並推出了新一代機器學習產品－Google Vision API ，它為 Google Cloud 提供的 AI 影像辨識工具，還被聯合利華 Unilever 採用；另外，傢俱大廠 IKEA 也透過 Cloud Vision API 打造一款商品搜尋應用程式，消費者只要對產品拍照，立即就能得知詳細資訊。 目錄 動手玩玩 Google Vision API 標籤偵測（LABEL_DETECTION） 臉部偵測（FACE_DETECTION） 煽情露骨內容偵測（SAFE_SEARCH_DETECTION） 標誌偵測（LOGO_DETECTION） 地標偵測（LANDMARK_DETECTION） OCR 文字辨識（DOCUMENT_TEXT_DETECTION）   動手玩玩 Google Vision API 今天， Python 課程內容介紹了Google Vision API ，它其實就像是 Google 的照片搜尋功能，主要能夠讓機器學習圖片中的物件 (如人臉、商標 Logo、圖片中的文字等等)，還可以偵測是否有暴力色羶腥的內容等等。簡單而言，Vision API 會自動辨認照片出現的物品並逐一做標籤。 只要 點我 打開 Google Cloud Vision API 的網頁，將圖片拖曳進下圖中的紅色區域，就能無痛、無料試玩大多數的 API 功能。 API 功能可簡單分成臉部辨識、標籤偵測、Web、文本辨識等等，下面將會就各個功能分別做說明。 標籤偵測 今天我們上傳一張圖片，API 就會回傳一組或多組回應。下圖為我們上傳一張貓咪圖片的範例，API 回傳了多組回應。 每一組回應包含三個值：mid、description 以及 score。上圖中右側顯示有 description 以及 score。 mid、description
閱讀完整內容