Background包含哪些屬性?

Background是縮寫，包含了以下幾個CSS屬性

1. background-color
2. background-image
3. background-position
4. background-repeat
5. background-size
6. background-origin
7. background-attachment
8. background-clip

因為第6~8個，我沒有實際使用過，所以會著重於前面1~5使用過卻沒有認真去鑽研的那些屬性。

參考資料: Background - 金魚都能懂的CSS必學屬性
background

1. background-color 設定背景顏色

從名稱就可以知道，是用來設定背景的顏色
例如:
background-color: brown;

2. background-image 將圖片設定成背景

一直以為只能設定一張圖片作為背景，查了之後才知道原來可以設定一個以上的圖片作為背景
例如:
background-image: url(" ");
background-image: url(""), url("");

參考資料:background-image

3. background-position 設定背景圖片的位置

常和background-image、background-repeat 搭配使用，讓背景圖片靠上、下、左、右或是置中顯示。
background-position 預設以左上角為起點，能控制的位置移動方式有水平的X軸移動和垂直的Y軸移動，不包含前後的Z軸。

background-position 常用來設定的值有以下幾種:

• 關鍵字(Keyword values): top or bottom(Y軸關鍵字), left or right(X軸關鍵字), center
• 百分比(percentage values): %
• 長度(length values): cm, inch, em,...

background-position語法

background-position最多可以用到四個值來作設定
例如:
background-position:top;
background-position: 25% 75%;
background-position: bottom 10px right;
background-position: bottom 50px right 100px;

background-position 關鍵字使用時要注意的事

1. 如果僅使用一個值，另一個值會預設成置中center，就不用同時設定X、Y軸
   例如:
   background-position: center; 設定背景圖片水平垂直居中於該容器中
   background-position: left; 設定背景圖片「水平靠左，垂直居中」
   background-position: right; 設定背景圖片「水平靠右，垂直居中」
   background-position: top; 設定背景圖片「水平居中，垂直靠上」
   background-position: bottom; 設定背景圖片「水平居中，垂直靠上」

2. 使用兩個值做設定，如果第一個值用的是Y軸的關鍵字(top or bottom)，另一個值就會變成是用來設定X軸
   例如:
   background-position: top right;

3. center這個關鍵字和其他值一起使用時，會變成是X軸先Y軸後的順序來設定
   例如:
   background-position: 50px center; 背景圖片位置會是在離容器左側 50px 位置並垂直居中
   background-position: center 50px; 背景圖片位置會是水平居中，並離容器頂端50px

參考資料:Background-position- 金魚都能懂的CSS必學屬性

4. background-repeat 背景圖片設定成重複拼貼填滿容器

background-repeat的主要用途是當背景圖片比容器尺寸小的時候，可以設定以拼貼的方式將容器的範圍填滿

background-repeat能設定的值有以下幾個:

• background-repeat: repeat; (預設) 設定背景圖片垂直水平都重複 多出來的圖片會被裁切掉
• background-repeat: repeat-x; 設定背景圖片水平重複 設定同background-repeat:repeat no-repeat; 多出來的圖片會被裁切掉。
• background-repeat: repeat-y; 設定背景圖片垂直重複 設定同background-repeat:no-repeat repeat; 多出來的圖片會被裁切掉。
• background-repeat: space; 背景圖片會在不裁切的狀態下，盡可能重複，如果有剩餘容器空間無法被圖片填滿，會自動均分剩餘的空間範圍
• background-repeat: round; 背景圖片會被改變大小，且在不裁切的狀態下，重複拼貼將容器的範圍填滿。
• background-repeat: no-repeat; 設定背景圖片不重複拼貼。

參考資料:background-repeat
Background-repeat- 金魚都能懂的CSS必學屬性

5. background-size 設定背景圖片的尺寸

background-size 常用的設定方式有以下幾種:

• 關鍵字: contain, cover
  background-size:contain;
  圖片原來的寬高比不會被改變，會縮放到背景圖片能完全顯示在容器中，所以會有留白區域

  background-size:cover;
  將背景圖片填滿整個容器，若背景圖片小於容器時，會寬高等比例地放大填滿容器，且超出容器範圍的圖片會被切 掉，容易造成失真。

  參考資料: background-size

• 設定一個值，該值會代表寬度，高度就會變成預設auto
  例如:
  background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

• 設定兩個值，第一個值代表寬度，第二個值代表高度
  例如:
  background-size: 3em 25%;

  通常不會用background-size去修改圖片的尺寸，而是會用影像編輯軟體將要放在網頁上的圖片直接改成要用的大 小，以避免影響傳輸的速度。

參考資料:
Background-size

Background-size- 金魚都能懂的CSS必學屬性

6. background-origin 定位背景圖片?

這是一個我根本沒用過的屬性 看完一些解釋 我還是有點困惑
目前的理解是這個屬性的用途是定位背景圖片 感覺不是太實用 也想不到要用在什麼時間點?
以內容框為基準來改變背景圖片的位置

background-origin 設定的方式

• background-origin: padding-box;
• background-origin: border-box;
• background-origin: content-box;

參考資料: MDN- background-origin W3SCHOOL- background-origin

7. background-attachment 將背景圖案設定成在拉動卷軸之後，仍可以顯示在固定位置

• background-attachemnt:scroll; 當網頁捲動時，背景圖案會跟著頁面滾動來移動 (預設)
• background-attachment:fixed; 設定背景圖案在螢幕上固定，即使是網頁捲動時，背景圖案仍固定顯示

參考資料:
Background-attchment- 金魚都能懂的CSS必學屬性
CSS沒有極限 - 意想不到的background-attachment

8. background-clip 設定背景圖片延伸位置

background-clip設定的值主要有以下幾種:

• background-clip: border-box;
• background-clip: padding-box;
• background-clip: content-box;
• background-clip: text;
  參考資料:background-clip

以上為個人學習筆記整理
若有錯誤，歡迎指正