關於Background-image與響應式

雖然說在CSS reset 上會加上

img{
    max-width: 100%;
    height: auto;
    }

使圖片自適應，那麼背景圖片該如何做到自適應呢?

什麼時機用背景圖片?

使用 img 標籤時機

1. 希望別人列印頁面時候包含這張圖片。(當圖片本身屬於網站內容的一部份時)
2. 當這張圖片有特別意義的語義，比如警告圖示，就需使用img標籤及它的alt屬性。向所有的使用者終端實現他的意義。
3. 如果使用動畫，img動畫要比background-image 表現更好。
4. 當圖片要有超連結，連結到外部網址時。
5. 當圖片要有點圖放大的功能時

使用 background-image 使用時機

1. 如果圖片不是內容的一部分使用 background-image。
2. 如果使用圖片替換文字請使用 background-image。
3. 如果不希望別人列印頁面時候包含這張圖片請使用 background-image。
4. 如果想改善載入時間 使用 CSS sprites (也就是小圖合併大圖的意思，可以把很多張小圖合併到一張大圖裡)。
   例如：原本10張小圖會觸發10次HTTP request，但透過CSS Sprites就可以只觸發1次HTTP request，如此一來，只需要load一張圖，降低網頁載入的時間。
5. 如果只想用一張圖片的一部分 請使用 CSS sprites。
6. 希望圖片自適應到某個高度即停止。

基本上在網站新增圖片時還是會先建議用HTML的，除非是要設定一個section的背景圖片再用CSS的background-image。而且新增HTML的後，可以再去CSS設定圖片樣式，像是：border-radius、box-shadow、filter、object-fit、opacity等等，彈性比較大。

background-image 語法

div{
    background-image: url(...);
    height: 300px; (可以控制自適應的高度)
    background-size: auto / cover / contain / % / px ; (用來設定背景圖片的尺寸)
    background-position: center / top / left / bottom / px / % ;
    background-attachment: scroll / fixed / local; (背景圖的固定樣式，在使用者捲動卷軸時呈現不一樣的視覺效果)
    background-repeat: repeat / no-repeat / repeat-x /repeat-y / space / round ;(設定背景圖片是否要重複)
}

上面為比較常用到的屬性，下面來詳細介紹:

基本語法

background-image: url(...);
導入背景圖片，可以使用相對路徑也可以使用絕對路徑

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

auto : 不改變原圖尺寸。
cover : 不改變圖片比例的情況下，用背景圖片把區塊塞滿後裁切。
contain : 不改變圖片比例的情況下，完整呈現圖片。
% : 選擇背景圖片在區塊中要顯示的比例。(會設置寬與高，若只有一個數字則高度為auto)。
px : 直接給定圖片的width和height，如果只輸入一個值，則width和height相同。

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

可以使用left/right/top/center/bottom/%/px
如果只輸入一個值，則width和height相同。

background-attachment 設定背景圖的固定樣式

不同的設定讓使用者捲動卷軸時呈現不一樣的視覺效果
scroll : (預設)當你設定背景圖的區塊也有卷軸時，在捲動該區塊卷軸時，背景圖會固定位置不變，但當捲動整個網頁的卷軸時，該區塊的背景圖繪跟著網頁卷軸滾動。
fixed : 不管你在捲動設定背景圖區塊內的卷軸，或是整個網頁的卷軸，背景圖都會固定位置不變。
local : 不管捲動哪個卷軸，背景圖都會跟著卷軸移動。

background-repeat 設定背景圖片是否要重複

repeat
no-repeat
repeat-x : 只在x軸重複背景圖片。
repeat-y : 只在y軸重複背景圖片。
space : 背景圖片尺寸不變的情況下，自動調整重複的背景圖片之間的間距。
round : 調整背景圖片的尺寸，讓重複的背景圖片可以剛好塞滿設定背景的區塊。

在製作網頁時，我會先客製化class:

.zoomimage{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}

當需要用到響應式的背景圖片時，僅需在區塊加上圖片路徑url與想特定設置的高度，再加上class即可。

另外在使用background-image時要特別注意:
想要使用background-image外面一定要有一個container，通常在html上會使用div。
需要特別注意的是外面這層div若沒有設定寬高，背景圖片是不會顯示出來的。