前端工程師CSS基礎功之背景重複顯示設定

前端工程師利用CSS搭配網頁設計是必備技能,本篇要教你如何設定背景重複顯示的方法.

前端工程師 經常利用 CSS background-repeat 來設定背景圖片是否重覆顯示、重覆顯示的方向，並且常與 背景圖樣設定 (background-image) 搭配使用。但是如果背景圖片是比較小的圖片，則可以使用 background-repeat 將小圖片自動佈滿整個網頁背景，這是相當普遍的節省頻寬設計方式 (但是圖片圖樣要單純一些，以免視覺雜亂)；當背景圖片是一張具有顯示範圍較大的圖片，則可以用 background-repeat 的「no-repeat」指令將圖片限制只顯示一次。

CSS background-repeat 基本語法如下：

background-repeat: 重複參數;

前端工程師 有四種 CSS background-repeat可以使用的重複參數來決定重複方向或是是否重複，分別為 repeat（預設值，圖片會沿著 x 軸與 y 軸重複）、repeat-x（圖片會沿著x軸重複）、repeat-y（圖片會沿著y軸重複) 以及 no-repeat (不重複)。以下是針對這四種參數的範例：

CSS background-repeat 各種參數的範例

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

其實除了上例的四個參數，還有一個 inherit 屬性，是繼承父層屬性的意思。但是因為部分瀏覽器 (如IE) 不支援，可能造成部分的人開啟網頁發生排版錯誤、或是圖片呈現錯誤。所以很少人使用，因此在此省略不介紹。

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

參考連結:

前端工程師CSS基礎功之背景位置設定

前端工程師CSS基礎功之背景固定模式設定

前端工程師CSS基礎功之背景顏色設定

有了網頁顏色代碼整理,網頁設計對於前端工程師來說再也不難!

達內教育又要和兩大IT產業合作了!快來看看這次他們的計畫~

達內教育學員見證

達內教育海外合作企業

前端工程師CSS基礎功之背景圖樣設定

前端工程師利用CSS語法設計網頁是必備的技能,本篇要教你背景圖樣設計的語法.

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

 CSS 背景圖樣設定 (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 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (background-attachment) 5. 背景圖片位置設定 (background-position)

參考連結:

前端工程師CSS基礎功之背景位置設定

前端工程師CSS基礎功之背景固定模式設定

前端工程師CSS基礎功之背景顏色設定

前端工程師必備十六進位代碼常用顏色表!

達內教育與惠普.英特爾合作,為培育更多IT人才!

達內時代科技教育集團簡介

Java課程、UI課程、程式課程、網路行銷課程推薦

前端工程師CSS基礎功之背景顏色設定

前端工程師利用CSS語法設計網頁是必備技能,本篇要教你背景顏色設定的語法.

前端工程師 使用 CSS 背景顏色設定 (background-color)屬性，不僅可讓簡潔的純色背景可以襯托出網頁的主體、也可決定網頁的風格。像是背景純黑的網頁與背景為粉紅色的網頁，風格就大不相同。其實 CSS 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基礎功之背景固定模式設定

IT教育產業龍頭達內教育,要和兩大IT產業攜手合作啦!

什麼!?臉書找到了一個雙贏的訓練AI人工智慧的方式?

中國IT教育領導品牌　達內教育集團第一家海外授權中心

達內教育開幕　培養台灣IT人才進入全球企業

前端工程師CSS基礎功之背景固定模式設定

前端工程師利用CSS語法搭配設計網頁是必備技能,本篇要教你背景固定模式的設定語法.

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

CSS background-attachment 基本語法如下：

background-attachment: 顯示參數;

另外,前端工程師 在使用CSS 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 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (background-attachment) 5. 背景圖片位置設定 (background-position)

參考連結:

前端工程師基礎知識之一:Class選擇器宣告法!

前端工程師人人必備懶人包:網頁顏色代碼對照表

前端工程師的基礎知識:ID選擇器宣告法

想把網頁用的五顏六色?這篇讓你成為心目中的前端工程師!

入門前端工程師知識~得心應手不是夢-CSS的特性

Java課程、UI課程、程式課程、網路行銷課程推薦

美國NASDAQ上市公司、外商IT教育培訓企業 

前端工程師CSS基礎功之背景位置設定

前端工程師利用CSS語法搭配設計網頁是必備技能,本篇要教你如何設定背景位置的語法.

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 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (background-attachment) 5. 背景圖片位置設定 (background-position)

參考連結:

前端工程師必學CSS指令說明:盒子模型(上)-盒子屬性.邊界

前端工程師必學CSS指令說明:盒子模型(下)-邊框.留白

前端工程師實用工具CSS之邊框屬性解釋

達內教育結合英特爾和惠普一起打造IT教育王國

CSS語法格式基礎篇, 前端工程師一定要會!!

NOWnews 今日新聞

中國IT教育領導品牌 達內教育集團第一家海外授權中心

前端工程師實用工具CSS之邊框屬性解釋

前端工程師設計網頁時常會利用CSS的各種屬性,本篇將針對邊框來詳細說明,希望對你們有幫助.

前端工程師使用的基本工具 CSS 中常見的邊框 (border) 屬性，分別介紹如下：

目錄   border-width: 邊線的寬度   border-style：邊框樣式   border-color：邊線的顏色   border-top/left/bottom/right: 上/左/下/右框線   border: 四邊框線

 

border-width: 邊線的寬度

border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數值單位。

/*薄線寬*/.thin { border-width: thin; border-style:solid;}
/*中等線寬*/.medium { border-width: medium; border-style:solid;}
/*厚線寬*/.thick { border-width: thick; border-style:solid;}
/*自行設定線寬*/.number { border-style:solid; }

 

border-width：邊線的樣式

border-style 屬性指定邊框的樣式。以下列出前端工程師常見的 border-style 屬性以及顯示的結果：

/*實線的CSS*/.solid { border-style: solid; }
/*點線的CSS*/.dotted { border-style: dotted; }
/*虛線的CSS*/.dashed { border-style: dashed; }
/*雙線的CSS*/.double { border-style: double; }
/*凸線的CSS*/.ridge { border-style: ridge; }
/*凹線的CSS*/.groove { border-style: groove; }
/*嵌入線的CSS*/.inset { border-style: inset; }
/*浮出線的CSS*/.outset { border-style: outset; }

 

border-color: 邊線的顏色

border-color 屬性是用來設定邊框的顏色。範例如下：

/*紅色邊框*/.red{ border-color: red;border-style:solid; }
/*藍色邊框*/.blue{ border-color: blue;border-style:solid; }

 

border-top/left/bottom/right: 上/左/下/右框線

我們可以將上下左右方向和樣式、寬度、及顏色合起來而成為一個屬性。舉例來說，border-top-style 屬性就是用來設定上邊框的樣式。 以下舉幾個例子：

/*上邊框為實線，下邊框為點線*/.topbottom{border-top-style:solid; border-bottom-style:dotted;}
/*上邊框為實線，且寬度中等*/.top{border-top-style:solid; border-top-width:medium;}
/*左邊框為實線，下邊框為紅色虛線*/ .leftbottom{border-left-style:solid; border-bottom-style:dashed; border-bottom-color:#00FF00;}

 

border: 四邊框線

若四邊的 CSS 邊框屬性都一樣，那我們可以在同一行用一個 border 屬性一次宣告邊框樣式、邊框寬度、以及邊框顏色，而不必四個邊都描述一次。

container{...
border: 1px solid #000000;
...}

​​​​​​​


參考連結:
前端工程師必學CSS指令說明:盒子模型(上)-盒子屬性.邊界

前端工程師必學CSS指令說明:盒子模型(下)-邊框.留白

還沒聽過Python嗎?免驚!這篇通通告訴你!
 ​​​​​​​
成為前端工程師前的教戰手冊 ​​​​​​​

12 年國教將會融入AI 人工智慧!

中國IT教育領導品牌　達內教育集團第一家海外授權中心

達內課程先就業再付款- 中時電子報 ​​​​​​​

前端工程師必學CSS指令說明:盒子模型(下)-邊框.留白

今天要延續上篇介紹前端工程師人人必須都要會的CSS中的盒子模式,本篇要說的是:邊框和留白.

盒子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。以下是盒子模式的式樣：

邊框

Border 是邊框，介於外側的邊界 (margin) 與內側的留白 (padding) 之間。前端工程師們不用特別設定，CSS 碼如下：

border: 邊界值 實線或是虛線 顏色;

邊框設定範例如下：

border: 1px solid #000000;

從上面的範例可見，我們得到一個外層包了一層黑色 (色碼為 #000000) 實線 (solid)、寬度1px的框。 border的數值前端工程師們只需要用空格分開即可，屬性不需要一個一個設定，如:border-width、border-style、border-color 等等。

留白

padding(留白)外側緊鄰邊框 (border)、內側緊鄰內容 (content)。如果沒有設定 padding，內容的部分就會黏著邊框,還會有padding 吃到背景色的情況發生。

以下是沒有設定 padding 的例子，可以看見內容的字緊鄰黑色的邊框

以下是有設定 padding 的例子, 可以看見內容的字與邊框有一段距離.這一段距離就是所謂的「padding」。padding會吃到背景色。

Padding 的上下左右調整，語法跟 Margin 一樣，順序很重要。列舉如下：

padding:[上面留白值] [右邊留白值] [下面留白值] [左邊留白值]

padding:[上面留白值] [左邊與右邊留白值] [下面留白值]

padding:[上面與下面留白值] [左邊與右邊留白值] 

padding:[上面與下面與左邊與右邊留白值] 

參考來源:
前端工程師必學CSS指令說明:盒子模型(上)-盒子屬性.邊界

前端工程師CSS字體單位解釋(上)絕對單位

前端工程師CSS字體單位解釋(下)相對單位

成為前端工程師前的教戰手冊 ​​​​​​​

程式課程選達內，美上市IT課程教育集團 ​​​​​​​

達內時代科技教育集團簡介
​​​​​​​
美國NASDAQ上市公司、外商IT教育培訓企業