background-size笔记

在使用background-size的时候遇到的一点点的疑惑，所以重温一下background-size的一些用法。

语法：

background-size:auto|length|cover|contain|initial|inherit;

• 默认值：auto；
• length（绝对值）：设置背景图片的宽高。若第一个被设定了，那么第二个的值为auto；
• percentage（百分比）：相对父元素宽高的百分比来设置背景图片的大小。
• cover：拉伸背景图片以使背景图片尽可能的铺满背景区域。致使部分图片可能不会在背景区域内。
• contain：缩放图片使得它的宽高都能被包含在内容区域内。
• initial：初始化
• inherit: 继承

总结：

• background的缩写：background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

如果同时简写bg-position和bg-size的话中间要加斜杠/；若同时使用多个图片背景，并且需要背景颜色的话，背景颜色属性需放到最后

• 百分比设置是相对于父元素，而不是相对于本身，这个应该注意一下。