月份: 2019 年 3 月

前端工程師專屬小課:CSS background-position背景位置設定

前端工程師專處小課背景單元最後一篇!! 這篇要來教大家的是背景位置設定!!

CSS background-position 是讓前端工程師用來定義背景圖片位置的，是 CSS background 的屬性之一，一般來說與背景圖樣屬性 (background-image)、背景重複參數 (background-repeat)一起搭配做網頁設計，來決定網頁背景圖片顯示位置，可以調整背景圖片靠上(top)、下(bottom)、左(left)、右(right)或是置中(center)。設計時需下水平位置與垂直位置的參數，可以數字、百分比或方向等為單位，讓圖片能夠在正確的位置呈現。

各種方向參數：

水平方向：left – 靠左對齊、center – 置中對齊、right – 靠右對齊

垂直方向：top – 靠上對齊、center – 置中對齊、bottom – 靠下對齊

CSS background-position 基本語法如下：

background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;

前端工程師通常使用水平方向與垂直方向的組合，來定義背景圖片呈現的位置。例如「background-position:left top;」這樣代表背景圖片靠左上角對齊。除此之外，還可以微調「靠左與靠上的距離或百分比」來設計，範例如以下所示：

background-position:right top;　// 靠右靠上對齊
background-position:right center;　// 靠右置中對齊
background-position:right;　// 靠右置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:right bottom;　// 靠右靠下對齊
background-position:left top;　// 靠左靠上對齊
background-position:left center;　// 靠左置中對齊
background-position:left;　// 靠左置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:left bottom;　// 靠左靠下對齊
background-position:top center;　// 靠上置中對齊
background-position:bottom center;　// 靠下置中對齊
background-position:center;　//背景圖片水平位置與垂直位置均置中對齊

background-position:30px 60px;　//靠左 30px 靠上 60 px 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10% 50%;　// 靠左 10% 靠上 50% 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10%;　// 效果同上一行，靠左 10% 靠上 50% 的位置 (如果您僅規定了一個值，另一個值默認為 50%。)

其他閱讀

前端工程師基本功!! CSS背景圖樣設定~

前端工程師的基本功之一!! 背景圖案設定你會了嗎? 學會了才能讓網頁背景變漂亮喔!!

除了純色背景之外，前端工程師也可以選擇使用背景圖樣設定(background-image)屬性，使用圖片來取代純色作為網頁的背景。如果網頁的主題不複雜的話，高質感的圖片也可以讓網頁整體看起來更加地豐富。使用圖片當背景需要注意網頁在各種不同的平台上(如電腦、手機等裝置)所顯示出來的效果，確認背景圖片是否能夠與網頁主體和諧的搭配，並且要避免出現喧賓奪主的情況。

背景圖樣設定 (background-image)屬性跟背景顏色設定 (background-color)屬性一樣，能夠設定的範圍除了網頁背景以外，前端工程師也可以用來設計網頁內元素，如表格、DIV 區塊、H1-H6 等的背景圖樣，更可與背景重複屬性(background-repeat)、背景固定模式屬性 (background-attachment)、背景圖片位置屬性 (background-position)來搭配做網頁設計。

CSS background-image 基本語法如下：

background-image: url("圖片URL位址");

其中 url 小括號內有三種可以使用的參數，分別為 none（預設值，不顯示圖樣）、inherit（繼承自上一層的圖片）以及本例的「 url(“圖片URL位址”) 」圖片網址這三種。以下有兩個範例分別為設定整個網頁的背景圖片以及網頁內元素的背景圖片。

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

background-image: url("圖片URL位址");

See the Pen background-image-example by Tedutw (@Tedutw) on CodePen.

CSS background-image 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景圖案設定

div(可替換成 h1、p 等網頁元素標籤){background-image: url("圖片URL位址");}

See the Pen background-image-content-example by Tedutw (@Tedutw) on CodePen.

以上的範例中有兩個不同的 DIV 區塊，由第一個 DIV 區塊可以看到 background-image 預設的背景圖片，如果背景圖片尺寸小於 DIV 區塊時，圖片則會自動重複到填滿整個區域。而第二個 DIV 區塊則使用了 background-repeat 來限制圖片顯示狀態只能沿著垂直方向重複。相關設定請參閱3. 背景重複設定 (background-repeat)。

其他閱讀

前端工程師專屬小課:CSS background-attachment 背景固定模式設定

身為前端工程師的你知道背景固定模式有哪些嗎? 知道該怎麼設定嗎? 不知道的話可是不行的喔~

CSS background-attachment 是前端工程師用來決定背景圖片是否要跟著滑鼠滾動而上下移動的，有三種不同的呈現方案，第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動；第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的，；第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。CSS background-repeat 一般來說與背景圖樣設定 (background-image) 一起搭配設計。

CSS background-attachment 基本語法如下：

background-attachment: 顯示參數;

有三種可以使用的顯示參數可供前端工程師們決定背景圖與網頁主體該以何種方式來搭配顯示，分別為 scroll（預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、fixed（背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、local（背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例：

CSS background-attachment 各種參數的範例

See the Pen background-attachment-example by Tedutw (@Tedutw) on CodePen.

現在新一代的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的前端工程師搭配「background-repeat: no-repeat;」參數使用，做出網頁主體都浮在高質感的背景圖的效果。

其他閱讀

前端工程師常用設定學起來, 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-repeat 背景重複顯示設定

今天篇文章要來教各位前端工程師們如何設定背景重複顯示!! 一共有四種方法喔~

CSS background-repeat 基本語法如下：

background-repeat: 重複參數;

CSS background-repeat 各種參數的範例

See the Pen background-repeat-example by Tedutw (@Tedutw) on CodePen.

其他閱讀

前端工程師學會背景位置設定讓你的網頁看起來更棒!!

前端工程師快把背景位置設定學起來!! 讓網頁看起來不再亂糟糟!!

各種方向參數：

水平方向：left – 靠左對齊、center – 置中對齊、right – 靠右對齊

垂直方向：top – 靠上對齊、center – 置中對齊、bottom – 靠下對齊

CSS background-position 基本語法如下：

background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;

background-position:right top;　// 靠右靠上對齊
background-position:right center;　// 靠右置中對齊
background-position:right;　// 靠右置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:right bottom;　// 靠右靠下對齊
background-position:left top;　// 靠左靠上對齊
background-position:left center;　// 靠左置中對齊
background-position:left;　// 靠左置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:left bottom;　// 靠左靠下對齊
background-position:top center;　// 靠上置中對齊
background-position:bottom center;　// 靠下置中對齊
background-position:center;　//背景圖片水平位置與垂直位置均置中對齊

background-position:30px 60px;　//靠左 30px 靠上 60 px 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10% 50%;　// 靠左 10% 靠上 50% 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10%;　// 效果同上一行，靠左 10% 靠上 50% 的位置 (如果您僅規定了一個值，另一個值默認為 50%。)

其他閱讀

前端工程師專屬小課:CSS background-image背景圖樣設定

前端工程師們看過來~ 今天要來和大家談一談背景圖樣設定!! 需要的人快學起來喔!!

CSS background-image 基本語法如下：

background-image: url("圖片URL位址");

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

background-image: url("圖片URL位址");

See the Pen background-image-example by Tedutw (@Tedutw) on CodePen.

CSS background-image 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景圖案設定

div(可替換成 h1、p 等網頁元素標籤){background-image: url("圖片URL位址");}

See the Pen background-image-content-example by Tedutw (@Tedutw) on CodePen.

其他閱讀

三種前端工程師一定要會的背景固定模式你都會了嗎?

前端工程師一定要會的三種背景固定模式設定今天一篇教會你!!

CSS background-attachment 基本語法如下：

background-attachment: 顯示參數;

CSS background-attachment 各種參數的範例

See the Pen background-attachment-example by Tedutw (@Tedutw) on CodePen.

其他閱讀

前端工程師專屬小課:CSS background-color 背景顏色設定

前端工程師專屬小課又來準時報到了!! 今天要來教的是CSS的背景顏色設定!! 學起來就能讓你的網頁風格萬變喔!!

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)。

其他閱讀