background是使用最多的属性之一，mask是使用最少的属性之一。为何要拿background和mask一起说呢？因为它们的格式和用法大部分相似，作用效果也相似，是少有的兄弟属性。另外，margin和padding也是一对常见的兄弟属性，何时使用margin何时使用padding，这个就自行探讨了

# 属性连写

background是一个大家庭，包含着众多子属性，这些子属性可拆开声明也可合并声明。拆开与合并也是看个人编码习惯，无特别的标准说一定要怎样处理。合并声明有一个标准称呼，叫做属性连写。

background包含以下子属性，而mask子属性也大部分与background一致。

• background-color：背景颜色
• background-image：背景图像
• background-repeat：背景图像平铺方式
• background-attachment：背景图像依附方式
• background-position：背景图像起始位置
• background-size：背景图像尺寸模式
• background-origin：定位区域
• background-clip：绘制区域
• background-blend-mode：混合模式

除了background，以下属性也包含众多子属性，它们单独声明也能代替单个子属性声明。例如padding-top:10px等价于padding:10px 0 0 0

• margin
• padding
• border
• outline
• mask
• font
• transition
• animation

最常使用的background，有些同学喜欢简写，有些同学喜欢连写。建议只声明一个子属性时使用简写，声明两个或以上子属性时使用连写。这样是为了规范代码，增加代码的可读性。

/* 简写 */
.elem {
    background-color: #f66;
    background-image: url("./img.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px 100px;
}
/* 连写 */
.elem {
    background: #f66 url("./img.png") no-repeat center/100px 100px;
}

细心的同学可能发现position和size在连写时使用/衔接起来了。

刚开始的background只有color、image、repeat、attachment和position这五个子属性，CSS3发布后增加了size、origin和clip这三个子属性，而position和size都能使用长度单位作为值，连写时就无法区分两者的位置了，所以使用/将两者衔接起来。

通用格式是position/size，若声明background:#f66 100px 100px，100px 100px对应是position，而size不会被声明。

属性连写的好处是比单个子属性声明要简洁得多，可少写很多代码。而background子属性众多，到底如何安排子属性连写顺序也是一个难题。刚好CSS2推荐了一条子属性连写顺序规则。

background: color image repeat attachment position/size

• origin和clip不能加入到属性连写中，因为其取值都是一致的，有些浏览器无法区分它们的取值。
• 若某些值缺省则往前补充即可。background子属性连写顺序并无强制标准，若不喜欢上述规范，也可自行制定。以下涉及到mask子属性连写顺序与background子属性连写顺序一致，就不再啰嗦了

# 背景

background子属性众多，其属性取值也很多。

• background-color：颜色
  • transparent：透明(默认)
  • Keyword：颜色关键字
  • HEX：十六进制色彩模式
  • RGB或RGBA：RGB/A色彩模式
  • HSL或HSLA：HSL/A色彩模式
  • Color1/Color2：覆盖颜色，背景颜色可能是Color1，若背景图像无效则使用Color2代替Color1
• background-image：图像
  • none：无图像(默认)
  • url()：图像路径
• background-repeat：图像平铺方式
  • repeat：图像在水平方向和垂直方向重复(默认)
  • repeat-x：图像在水平方向重复
  • repeat-y：图像在垂直方向重复
  • no-repeat：图像仅重复一次
  • space：图像以相同间距平铺且填充整个节点
  • round：图像自动缩放直到适应且填充整个节点
• background-attachment：图像依附方式
  • scroll：图像随页面滚动而移动(默认)
  • fixed：图像不会随页面滚动而移动
• background-position