搬运自: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
顺序并非固定, 但是要注意:
- background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。
- 如果同时使用 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;