背景图语法

背景图片

语法：background-image:url（“图片路径”）;

作用范围：内容+边框+内填充

背景图片默认位于元素的左上角，在水平方向和垂直方向进行重复

设置背景图片是否重复

语法：background-repeat

取值：repeat背景图片在水平和垂直方向重复（默认值）

repeat-x背景图片在水平方向重复

repeat-y背景图片在垂直方向重复

no-repeat背景图片只出现一次不重复

背景图片的起始位置

语法：background-position

默认值：左上角

取值

关键字

水平 left right center

垂直 top bottom center

长度值：px

百分比：

第一个值表示水平方向，第二个值表示垂直方向，如果只出现一个值，另一个值是50%

简写

语法：background：颜色图片是否平铺起始位置

如果那个样式不需要，可以直接省略

多背景

语法：background-image：url（图片路径），url（图片路径）

不同的背景用逗号隔开，并且还可以给不同的背景设置不同属性（背景起始位置、背景是否重复等）

书写顺序越靠前，显示越靠上

背景图的大小

语法：background-size

取值：数值：宽、高 如果只设置一个值，第二个值会被自动设为auto

cover覆盖：等比例缩放背景图片铺满整个盒子，但是背景图片可能无法完整显示

百分比：按照盒子大小进行百分比计算，宽、高 如果只设置一个值，第二个值会被自动设为auto

contain：包含等比例缩放背景图片到完整的盒子中，但是背景图再区域范围内不能铺满，取决于盒子和图片的比例不一致

背景定位

语法：background-origin

取值：padding-box 背景图相对于内填充区域来定位（默认值）

content-box 背景图相对于内容进行定位

border-box 背景图相对于边框区域进行定位

背景颜色绘制区域

语法：background-clip

取值：content-box 背景裁剪到内容区域，仅在内容区显示

padding-box 背景裁剪到内填充区域，在内容区和内填充区显示

border-box 背景裁剪到边框区域，在内容区、内填充区、边框区显示（默认值）