接下來的 CSS 教學我們來了解一下 CSS 的背景設置，在 CSS 當中我們可以通過給予 CSS 背景屬性 background，就可以給頁面添加顏色背景等樣式，當然如果不想只改變背景的顏色，我們也是可以引入背景圖片唷! 但是當你引入圖片後就會有問題產生，這邊產生的問題是背景圖片的平舖效果，一般情況下引入的圖片都是默認平鋪的。
所以我們可以使用一些方法讓圖片取消平鋪並達到合乎我們理想的狀態，還有透過一些方式讓圖片固定在我們需要固定的地方，本篇都會把一般前端開發人員在開發時使用到的 CSS 背景屬性的常用的一些技巧和細節通通說給你聽，那我們開始學習我們的 CSS 教學背景的應用與邏輯並說給你一些你平常沒注意到的細節給你聽。
- CSS 設置背景有哪些呢?
- CSS 只能設置背景顏色嗎?
- CSS 能夠設置背景圖片嗎?
- CSS 設置完背景能改變它的位置嗎?
- CSS 設置完背景可以取消平鋪嗎?
- CSS 背景圖片能固定在某個位置嗎?
CSS 如何設置背景顏色?
背景顏色在前面我們的 CSS 教學已經開始有用到了，就算你不知道它有什麼功能，沒關係它從字面上的意思就能夠知道它的功能，如還不知道的話也沒關係它就是能夠改變背景的顏色唷! 使用背景顏色的時機其實並不確定，需要看你的客戶需求，但是一般我們很常用在開發時佈局頁面時會用到大量個 <div> 盒子標籤因為盒子標籤就是透明的很難知道我們調整這盒子是不是對的，這時候就會給予盒子模型標籤賦予背景顏色，這樣就能在網頁上很明確知道我們改變什麼唷!
CSS 背景顏色的語法格式?
CSS 背景顏色的英文是 background-color 這是它的英文組合單字，你可能會有小疑問為什麼它們中間要使用一個減號「–」呢? 那是因為在程式中是不被允許使用空格來做命名，所以會有很多命名多個單字所組成的 CSS 屬性就會都使用減號「-」做隔開唷!
background-color: transparent|顏色值;
CSS 背景顏色屬性值說明
- transparent : 背景透明
- color : 能使用顏色名稱、16 進制、RGBA 來賦予顏色
背景顏色值一般如果你沒給的話是會默認 transparent ( 透明 ) 唷! 另一種是給予 color ( 顏色 )，就這 2 大類，color ( 顏色 ) 又能夠在分成 3 種，分別是預定義顏色名稱、16 進制、RGBA 顏色，有想起來了嗎? 是不是很熟悉在很之前的 CSS 教學我們有討論過顏色的應用，當然用在背景顏色也是一樣的唷! 我們來透過下列例子熟悉一下應用吧!
我們先來創建一個 HTML 的骨架結構，並在裡面設置一個 <div> 盒子標籤，設定好後打開網頁你一定看不出來這盒子是否有符合我們規定，但是其實有，所以我們會在加入 CSS 屬性代碼看看
<body>
<div>
我是盒子
</div>
</body>
我們接下來在創建一個 CSS 屬性代碼裡面新增 width ( 寬度 ) 與 height ( 高度 ) 各設置 300px，背景顏色設置紅色來看看是否我們的 <div> 盒子模型標籤有沒有能夠辨識出來。
<style>
div {
width: 300px;
height: 300px;
background-color: red;
}
</style>
完成之後你就會發現盒子原本設置寬度與高度是 300px 在網頁中是看不見的因為默認是 transparent ( 透明 )，但我們今天新增了 CSS 背景顏色屬性就能夠改變它的顏色了，通常開發時候就算完成品是要 transparent ( 透明 ) 我們也是會先暫時新增 CSS 背景顏色進行觀察與檢測我們是否設置對，當最後完成開發完後才會把所有的不需要的背景顏色都移除唷!
- CSS 背景顏色默認是 transparent ( 透明 )
- CSS 背景顏色有兩大類設置
- transparent ( 透明 )
- color ( 顏色 )
- CSS 背景顏色 color 又能夠使用 3 種方式設置
- 定義顏色名稱方式，例如: red、green、blue
- 16 進制方式，例如: #FFF000
- RGBA 方式，例如: rgba(0,0,0,1)
CSS 如何設置背景圖片?
接下來 CSS 教學是 CSS 背景圖片怎麼設置，在前一節我們是加入顏色如果你不想要加顏色，在 CSS當中我們可以加入圖片也是沒問題的唷! 那這樣的 CSS 屬性用法也會不相同，這你沒問題吧! 其實你也不太需要擔心有多大的改變，其實就只是換一個單字而已。
CSS 背景顏色是 background-color 那 CSS 背景圖片我想你應該知道 CSS 的屬性名稱是如何組合的吧! 沒錯就是 background-image 就只是圖片的英文單字，那這邊要記住是不帶 s 的複數圖片，你這樣想唷! 今天我們是只能引入當前背景一張圖片就是單單一張，並不是複數張這樣你在使用時就不會多了一個 s 而無法使用這個 CSS 背景圖片屬性了，很多人因為都是多打一個 s 而無法使用該屬性。
background-image: none | url(url);
CSS 背景圖片屬性值說明
- none : 無背景顏色
- url : 使用相對或是絕對地址，指定背景圖片
CSS 背景圖片的使用場景有哪些?
一般 CSS 背景圖片的使用場景，在實際開發過程中我們會用在公司的 Logo 配置以及一些裝飾性的小圖片，什麼是裝飾性的小圖片呢? 你可能會想問其實不難理解你看到有一些網站在有些選單的前面會放置一些可愛的小圖片之類的那就是使用到 CSS 背景圖片配置的唷! 當然還有使用超大型圖片也是可以，那你可能會問說，我直接使用 HTML 的 <image> 圖片標籤就好啦?!
雖然都是使用圖片，但可就不同了 CSS 的背景圖片可以設定到的功能會更細，例如決定是否平鋪、怎麼在盒子裡面擺設…等，非常多功能，會與 HTML 的 <image> 圖片標籤差非常大，如果你還是不能理解的話沒關係，你使用 CSS 背景圖片就是能夠在某個指定盒子 ( 空間 ) 進行設置背景圖片，你設置的背景圖片就只會在那個盒子空間裡，還能夠做到 X 軸與 Y 軸移動、背景圖片是在文字下方
- CSS 背景圖片是在文字下方
- CSS 背景圖片可控制 X 軸移動
- CSS 背景圖片可控制 Y 軸移動
- CSS 背景圖片能控制的東西多於 HTML 的 <image> 圖片標籤
CSS 背景圖片實際怎麼應用?
我們了解了 CSS 背景圖片的一些特有特性後，接下來實際動手寫寫看，看真的真的是如此嗎? 我們先寫個 HTML 骨架結構準備一個 <div> 盒子標籤，設置好後一樣你也是看不到任何東西，因為是默認 transparent ( 透明 )。
<body>
<div>
我是盒子
</div>
</body>
看不到沒關係我們再來設置 CSS 屬性 width ( 寬度 ) 與 height ( 高度 ) 各設置 600px，這次設置大一點盒子為了來驗證看看 CSS 背景圖片是否能引入，接下來使用我們新學到的 CSS 背景圖片屬性
<style>
div {
width: 600px;
height: 600px;
background-image: url(http:www.google.com);
}
</style>
設置好後存檔你查看你的網頁是否能夠顯示，我相信一定可以的，這邊你需要注意一下你引入圖片的方式，一種是「相對地址」一種是「絕對地址」，一般前端人員在引入圖片到背景的話都會使用相對的方式，因為你圖片就是已經存在你那台伺服器了，所以你要使用路徑的方式引入，不建議你使用絕對地址，會怕你存的地方遺失或是檔案損毀引想到背景圖片顯示不出來等問題，畢竟別忘了 CSS 背景圖片用在 LOGO 最常用，公司不希望看見公司的 LOGO 在網頁上顯示不出來吧!
那現在如果你看見背景圖片在你盒子中出現很多一模一樣的圖片是正常的，因為他們自帶平鋪效果，不要懷疑你是否使用錯了唷! 是正常現象，那如何控制背景圖片呢? 不用急在下個小節就會開始說囉!
CSS 背景如何平舖?
在剛才 CSS 教學中我們是不是設置好圖片在 <div> 盒子標籤中，如果你引入的背景圖片太大是看不出有平鋪的效果，所以請你換一張小一點的背景圖片或是在把 <div> 盒子標籤的寬 ( width ) 和高 ( height ) 加大，才能看見 CSS 背景圖片的平鋪效果唷! 那還沒換背景圖片的或是加大 <div> 盒子標籤請先弄好才能繼續學下去唷!
那為什麼我們需要了解 CSS 背景圖片的平鋪效果呢? 因為 CSS 會自動默認去把比較小的背景圖片平鋪整個盒子自動去填滿，然而 CSS 的重複過程與複製你圖片並呈現在你 <div> 盒子標籤中，這種效果功能就叫平鋪效果，但問題是開發的時候很常我們是不希望有平鋪的效果，下節開始小青我會好好講如何去取消平鋪效果。
CSS 背景平鋪語法是什麼?
如果你需要在 HTML 頁面上對 CSS 插入的背景圖片進行平鋪或是你不想要讓插入的 CSS 背景圖片默認平鋪效果，我們就可以使用 background-repeat 屬性來限制或是控制我們插入的背景圖片效果唷! 向是 X 軸平鋪或是 Y 軸平鋪都可以做到，那我來看看語法吧!
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
CSS 背景平鋪屬性值說明
- repeat : 平鋪( X 軸與 Y 軸 )
- no-repeat : 不平鋪
- repeat-x : 沿著 X 軸平鋪
- repeat-y : 沿著 Y 軸平鋪
接下來我們來實際看看這四種效果，首先我們也是需要一個全新的 HTML 骨架結構，新增一個 <div> 盒子標籤，那還要新增什麼嗎? 不需要囉! 創建好後我們打開來看看網頁中是否能夠顯示，當然不能因為 <div> 盒子標籤現在是透明狀態，我們需要使用 CSS 屬性才能給予更多細節控制。
<body>
<div>
我是盒子
</div>
</body>
再來我們設置 CSS 屬性 width ( 寬度 ) 與 height ( 高度 ) 各設置 600px，加入 CSS 平鋪效果默認是平鋪就是 X 軸和 Y 軸都把圖片鋪滿，別忘了找小一點的圖片觀察，在給予 no-repeat 效果看看如何，你就會看見真的背景圖片只會顯示一個的，如果使用 repeat-x 就只會在整條 X 軸平鋪背景圖片，如果是在改變 CSS 平鋪屬性值為 repeat-y 就會在整條 Y 軸上平鋪唷! 不信的話你可以試試看。
<style>
div {
width: 600px;
height: 600px;
background-image: url(http:www.google.com);
background-repeat: no-repeat;
}
</style>
再來我們設置 CSS 屬性 width ( 寬度 ) 與 height ( 高度 ) 各設置 600px，加入 CSS 平鋪效果默認是平鋪就是 X 軸和 Y 軸都把圖片鋪滿，別忘了找小一點的圖片觀察，在給予 no-repeat 效果看看如何，你就會看見真的背景圖片只會顯示一個的，如果使用 repeat-x 就只會在整條 X 軸平鋪背景圖片，如果是在改變 CSS 平鋪屬性值為 repeat-y 就會在整條 Y 軸上平鋪唷! 不信的話你可以試試看。
<style>
div {
width: 600px;
height: 600px;
background-image: url(http:www.google.com);
background-repeat: no-repeat;
}
</style>
最後的最後你可能會問小青那我可以加入 background-color ( 背景顏色 ) 和加入 background-image ( 背景圖片 ) 同時使用嗎? 當然可以唷! 只是顯示的方式是背景顏色會在最底下，而背景圖片會在背景顏色上方唷! 這點要注意。
背景顏色與背景圖片的順序:
- 背景顏色在最底下
- 背景圖片在背景顏色上方
如果不好理解，把它們想像成好幾層的生日蛋糕，背景顏色在最底下那一層當地基，地基的上面就是背景圖片唷! 是不是比較好理解了呢?!!
CSS 背景圖片位置如何使用?
在前面我們不是說背景圖片最大的特色是能夠控制位置非常方便嗎? 但我們都還沒正式介紹到要如何控制呢! 本小節就要來看看到底是如何控制背景圖片的位置是怎麼使用的，在 HTML 中我們是學 <img> 圖片標籤是插入在 <body> 標籤裡頭，我們很難去控制 <img> 圖片標籤的位置，要注意是任意位置唷! 圖片標籤是不是很難呀!!!
你這邊可以停下來想想可不可以、能不能夠呢? 但是如果你是設置背景圖片background-image CSS 屬性它控制起來是不是會比使用 <img> 圖片標籤來的更方便呢?! 能夠的，接下來就要來介紹如何控制背景圖片位置。
CSS 背景位置語法是什麼?
我們可以利用 CSS 屬性 background-position 來改變 CSS 背景圖片位置，background 就是背景的意思而 position 就是位置的意思，兩個單字合起來就是背景位置中間使用減號隔開，就形成一個新的 CSS 屬性命名了，背景圖片位置屬性可是相當重要的唷! 使用頻率也很高要多加練習熟練。
background-position: x y;
CSS 背景位置屬性值說明
- x : x 是指 X 座標
- y : y 是指 Y 座標
這兩個 X 座標與 Y 座標可以使用方位的名稱或是精準單位，這樣就可以控制圖片能夠自由的移動到你想移動的地方囉!
什麼! 你不知道方位的名稱?! 好的沒關係，小青我來跟你好好介紹一下方位名稱是什麼!
CSS 背景位置方位名稱是什麼?
其實不太難理解，在很前面的 CSS 教學中我們不是有用到 left 或是 right 或是 center 有沒有想起來了呢? 就是在 CSS 文本，那篇 CSS 教學之中我們有先用到過了，這種用法就是稱為方位名稱唷! 一樣的在 CSS 背景位置設置也是可以使用這一的方法的只是多了裡個新的方位名稱 top ( 上 ) 和 bottom ( 下 )，接下來我們來實際是用看看吧!
使用方位名稱不需要在意使用 background-position 後面的屬性值的先後順序，也就是不需考慮 X 軸是先還是 Y 軸是後唷! 隨便你使用的，不信的話你可試試看的，我們先創建一個 HTML 骨架標籤，在裡頭新增一個 <div> 盒子標籤。
<body>
<div>
我是盒子
</div>
</body>
CSS 屬性之中設置 CSS 屬性 width ( 寬度 ) 與 height ( 高度 ) 各設置 500px，並加入 CSS 背景圖片background-image，在使 CSS 平鋪效果為不平鋪效果，這次加入我們新學到的背景定位功能，是使用方位名稱給予 left 和 top 完成後你存檔查看網頁上是不是圖片呈現靠左上呢?
<style>
div {
width: 500px;
height: 500px;
background-image: url(http:www.google.com);
background-repeat: no-repeat;
background-position: left top;
}
</style>
是不是圖片在左上沒問題吧! 如果沒問題的話，我們把順序改成 top 和 left 存檔是不是圖片是靠上又靠左呢?! 是不是跟前面使用 left 和 top 效果是一樣的，使用方位名稱因為就已經很明確說方向了靠左上或是靠上在靠左了，沒人會給靠左又靠左吧! 所以使用方位名稱不需考慮 X 軸與 Y 軸的位置唷! 因為說明名稱就是明確的方位了。
還有另一種寫法你只寫一個方位名稱例如你寫 background-position 屬性值只給一個參數 right 會發生什麼事呢? 它就會顯示靠右然後居中唷! 剛剛我們是使用 X 軸的方式靠右，這次只給 top 值也就是 Y 軸方向，另一個值不給會發生什麼事? 那會顯示靠上居中唷! 也就是如果你值給一個的話另一個值會自動幫你補 center 居中唷! 不信的話你可以自行試試看。
CSS 背景位置使用方位名稱只設置一項會發生什麼事?
- left ( 靠左 )、right ( 靠右 ) 是 X 軸移動，系統會自動默認 Y 軸參數 center ( 居中 )
- top ( 靠上 )、batton ( 靠下 ) 是 Y 軸移動，系統自動默認 X 軸參數 center ( 居中 )
CSS 背景位置精確位置是什麼?
在剛剛我們介紹使用方位的名稱來使背景圖片依照靠左靠右 X 軸的方式移動位置以及靠上和靠下方式來訂定座標，但今天我就是不想要用這種方式可以嗎? 我想要設置更精確一點位置，才能調整更多細節我能夠做到嗎? 能夠的唷! 我們可以透過精確位置來控制移動背景圖片 10px 或是 20px 在 X 軸方向或是 Y 軸方向都是可以的，我們來看看 CSS 背景位置語法是一樣的只是差別在細節。
background-position: x y;
你需要注意 X 與 Y 的先後順序了，第一個參數就是 X 軸方向、第二個參數就是 Y 軸方向，順序是不能夠顛倒，跟 CSS 背景位置的方位名稱不同了，方向位置是不需要考慮先後順序，我們使用之前的 HTML 結構骨架這次只改變 CSS 屬性值就好，這是我們給 X 軸 10px、然後 Y 軸給 20px
<style>
div {
width: 500px;
height: 500px;
background-image: url(http:www.google.com);
background-repeat: no-repeat;
background-position: 10px 20px;
}
</style>
你試看看是不是真的網頁呈現出來是 X 軸 10px、然後 Y 軸給 20px，要怎麼看網頁是否對呢?! 很簡單使用 F12 就能看見 HTML 和 CSS 代碼了或是你按滑鼠右鍵選擇「檢查」也是能夠看見唷! 那你可能想剛剛方位名稱的用法能夠只寫一個參數另一個系統會自動默認 center ( 居中 )，那使用精確參數可以嗎? 可以的
<style>
div {
width: 500px;
height: 500px;
background-image: url(http:www.google.com);
background-repeat: no-repeat;
background-position: 10px;
}
</style>
如果你 Y 軸沒寫的話系統就會自動默認居中唷! 不過不管你怎麼空第一個參數一定是 X 軸，你不可能做到 X 軸空著 Y 軸填選參數的唷!
- 精確方位第一個參數是 X 軸、第二個參數是 Y 軸
- 可以只填一個參數，系統會默認 Y 軸參數為 center ( 居中 )
CSS 背景位置混合單位是什麼?
這個方式就是綜合方位名稱與精確方位一起混合去使用，但你必須遵守第一個參數一定是 X 軸、第二個參數一定是 Y 軸唷! 我們來直接看怎麼使用吧! HTML 骨架結構也是一樣是建一個 <div> 盒子標籤就可以了。
<body>
<div>
我是盒子
</div>
</body>
CSS 的背景位置這次我們使用混合單位的寫法，第一參數 X 軸我們給 10px 第二參數 Y 軸 bottom 來看看，網頁是不是會依照我們這樣方式去執行呢?! 答案是可以的唷! 要記住如果你掉換參數值位置，就會顯示不同結果囉! 不信你可以試試看。
<style>
div {
width: 500px;
height: 500px;
background-image: url(http:www.google.com);
background-repeat: no-repeat;
background-position: 10px bottom;
}
</style>
CSS 背景圖像如何固定?
CSS 背景圖片固定就是背景附著，如果不好理解就是我們滾動滑鼠滾輪頁面是不是會整個移動，這你就沒問題吧! 如果 HTML 網頁中有 <img> 圖片標籤和 <p> 段落標籤，這時頁面是不是會一起滾到下面呀! 那今天我們如果使用 CSS 圖像固定的方式，圖片就會被定在那邊滑鼠滾輪移動，圖片就是不會動。
background-attachment: scroll | fixed;
CSS 背景圖像屬性值說明
- scroll : 滾動效果 ( 默認 )
- fixed : 固定效果
一般如果如果你沒有使用 CSS 背景圖片固定 background-attachment 這個屬性的話，系統就是默認滾動效果唷! 如果你希望圖片是要呈現固定效果才會使用 CSS 背景圖片固定屬性，我們實際來看看吧! 創建一個 HTML 結構骨架，新增一個 <div> 盒子標籤和越多越好我們要來觀察滾動效果 <p> 段落標籤
<body>
<div>
我是盒子
</div>
<p>我是小青</p>
<p>我是小青</p>
<p>我是小青</p>
</body>
再來新增 CSS 屬性，我們要先定義 width ( 寬度 ) 與 height ( 高度 ) 各設置 500px 之後插入背景圖片屬，然後背景圖片不平鋪，背景圖片位置 X 軸 center ( 居中 )、Y 軸 top ( 靠上 )，最後補上新學到的 background-attachment 固定背景圖片，讓我們在滾動滑鼠那背景圖片就還定在那邊的效果
<style>
div {
width: 500px;
height: 500px;
background-image: url(http:www.google.com);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
</style>
完成後你就會發現確實滾動滑鼠那張圖片就會定在原地，不在會往下跑動唷! 如果還是會跑動代表是使用錯誤唷! 可以找找看哪邊你打錯了。
點我瞭解 小青如何每月多賺5位數台幣CSS 背景屬性複合寫法是什麼?
經過我們一輪的 CSS 背景學習，你是不是發現我們今天使用到一個背景 background 我們就要打一次，如果都用到不是一直打一直打累死，這時候 CSS 開發者也知道會有這樣的情況，所以又改善出如果你需要使用背景的話不需要全部都打出來的簡潔打法，你可以看下面，以前我們如果都用到是不是打 5 行真的有夠大坨。
<style>
div {
width: 500px;
height: 500px;
background-color: red;
background-image: url(http:www.google.com);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
</style>
為了簡潔 CSS 背景屬性的代碼，我們可以把背景 background 全部濃縮在一起，就能夠節約代碼，簡寫的方式沒有規定的順序但是一般我們前端人員的共識還是有順序，方式如下表示。
background: 背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置;
我們把之前的 CSS 背景圖片固定那一個 CSS 屬性整個弄縮看看，方法如下
<style>
div {
width: 500px;
height: 500px;
background: red url(http:www.google.com) no-repeat fixed center top;
}
</style>
這樣的 CSS 背景複合寫法是不是變的更簡潔了，以前我們還需要一次打那麼多行，現在一行就能夠搞定了，在日後維護也能夠大大的提升效率，好方法不學嗎? 那這樣的寫法會影響呈現的結果嗎? 當然不會不信你自己動手寫寫看試試看，這種方法也是前端人員最常使用的方式唷!
CSS 背景總結
經過前面一輪的車輪戰學習，我相信你應該很會用怎麼改變背景顏色、怎麼去引入背景圖片，也知道可以同時使用背景顏色和背景圖片只是差別在誰先誰後，你應該知道誰先誰後吧!? 接下來是背景圖片的位置是能夠設置位置的其中有 2 種方法還記得嗎? 雖然是有 2 種方法但還是可以混合使用你也還記得怎麼混用嗎? 還有引入的圖片是平鋪還是不平鋪呢?
| 背景屬性 | 功能 | 屬性值 |
| background-color | 背景顏色 | 顏色值、16進制、RGBA代碼 |
| background-image | 背景圖片 | url(圖片路徑) |
| background-repeat | 背景平鋪 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景定位 | 有X軸與Y軸順序 |
| background-attachment | 背景滾動效果 | scroll(背景滾動)/fixed(背景固定) |
如果使用滑鼠滾動要讓圖片固定在原地要使用什麼參數呢? 最後的最後我們不是寫了一大堆背景屬性太重複的打 CSS 背景屬性，我們會使用簡潔的打法我想你應該都還記得，如果你有些忘了，就說明你練習不夠，你只要多加練習該 CSS 背景屬性一定學的會的，共勉之。
點我瞭解 小青如何每月多賺5位數台幣
能看到這裡通常只有 1％ 的人，很感謝您可以閱讀到這裡（鞠躬）
本篇文章歡迎社群分享，可按分享按鈕，讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷！
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青