[Back To Basic] CSS Multiple Backgrounds

讓多個圖片在同一個元素中

語法

做法一:
background-image: 圖片來源1, 圖片來源2
background-position: 圖片1位置, 圖片2位置
background-repeat: 圖片1重複方式, 圖片2重複方式

做法二(縮寫):
background: 圖片來源1 圖片1位置 圖片1重複方式, 圖片來源2 圖片2位置 圖片2重複方式

*.用逗號分隔多張圖片

*.來源1 會在來源2上方，以此類推

語法: background-size

可以決定背景圖片的大小，包含兩個特殊值

• contain

背景圖 > 所在內容: 但卻需要將背景圖完整呈現，用contain，使背景圖縮小至內容的大小

• cover

背景圖 < 所在內容: 而背景圖又不適合使用repeat，用cover，使背景圖放大至內容的大小，但此方法容易使背景圖因放大而失真。

*. 也可配合多圖片，用逗號分隔即可

滿版背景圖片

能夠達成以下條件

• 圖片滿版
• 在需要的時候擴展圖片
• 圖片置中於整個頁面
• 不會產生 scrollbar

background: url(img_man.jpg) no-repeat center fixed; 

background-size: cover;

語法: background-origin(位置會受到background-position影響)

指定圖片繪製的起始位置

• border-box

以左上border當起點

• padding-box(預設值)

以左上padding邊界當起點

• content-box

以左上content邊界當起點

語法: background-clip

指定圖片顯示的起始位置

• border-box(預設值)

border之外

• padding-box

padding之外

• content-box

content之外

source code