搬運自：https://juejin.cn/post/6844903463273381901

background簡寫屬性在一個宣告中可設定所有的背景屬性。

可設定屬性如下:

• background-image: 設定背景影象, 可以是真實的圖片路徑, 也可以是建立的漸變背景;
• background-position: 設定背景影象的位置;
• background-size: 設定背景影象的大小;
• background-repeat: 指定背景影象的鋪排方式;
• background-attachment: 指定背景影象是滾動還是固定;
• background-origin: 設定背景影象顯示的原點[background-position相對定位的原點];
• background-clip: 設定背景影象向外剪裁的區域;
• background-color: 指定背景顏色。

簡寫的順序如下: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip

順序並非固定, 但是要注意:

1. background-position 和 background-size 屬性, 之間需使用/分隔, 且position值在前, size值在後。
2. 如果同時使用 background-origin 和 background-clip 屬性, origin屬性值需在clip屬性值之前, 如果origin與clip屬性值相同, 則可只設置一個值

示例程式碼：

background: url("image.png") 10px 20px/100px no-repeat content-box;

background是一個複合屬性, 可設定多組屬性, 每組屬性間使用逗號分隔, 其中背景顏色不能設定多個且只能放在最後一組。

如設定的多組屬性背景影象之間存在重疊, 則前面的背景影象會覆蓋在後面的背景影象上。

示例程式碼：

padding: 10px;
background: url("image.png") 0% 0%/60px 60px no-repeat padding-box,
            url("image.png") 40px 10px/110px 110px no-repeat content-box,
            url("image.png") 140px 40px/200px 100px no-repeat content-box #58a;