css——background屬性設置background-size

搬運自：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;