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

 

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

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

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

 

其他閱讀

前端工程師的專屬小課:CSS套入HTML中的四種方法

前端工程師的專屬小課:如何在HTML和CSS中宣告顏色代碼

前端工程師後端工程師傻傻分不清?想學寫網頁不知道可就糗了!

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?

人工智慧寫作能力勝過人類,文章新聞真假難辨!

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

 

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

三種前端工程師一定要會的背景固定模式你都會了嗎?
三種前端工程師一定要會的背景固定模式你都會了嗎?
前端工程師一定要會的三種背景固定模式設定今天一篇教會你!!
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 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

其他閱讀

前端工程師的專屬小課:CSS套入HTML中的四種方法

前端工程師的專屬小課:如何在HTML和CSS中宣告顏色代碼

前端工程師後端工程師傻傻分不清?想學寫網頁不知道可就糗了!

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?

人工智慧寫作能力勝過人類,文章新聞真假難辨!

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

 

 

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

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

前端工程師專屬小課又來準時報到了!! 今天要來教的是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套入HTML中的四種方法

前端工程師的專屬小課:如何在HTML和CSS中宣告顏色代碼

前端工程師後端工程師傻傻分不清?想學寫網頁不知道可就糗了!

你聽過的大企業都投入AI領域,你還不趕緊來個Python課程先?

最好剁手的屈臣氏利用大數據課程提升業績,你還在等什麼呢?

人工智慧寫作能力勝過人類,文章新聞真假難辨!

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