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;