background 是以下属性的缩写,background-size属性值只能写在background-position属性值的后面,并且使用斜杠分隔。
值 | 描述 |
background-color | 规定要使用的背景颜色。 |
background-position | 规定背景图像的位置。 详见 《background-position详解》 |
background-size | 规定背景图片的尺寸。 |
background-repeat | 规定如何重复背景图像。默认repeat , 常用 no-repeat ,新增了space和round(兼容性不好) |
background-origin | 规定背景图片的定位区域。 |
background-clip | 规定背景的绘制区域。 |
background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 scroll(滚动)、fixed(固定,不会随滚动条滚动) |
background-image | 规定要使用的背景图像 |
背景图片/渐变 background-image
背景图片
背景渐变
背景定位 background-position
初始值为0% 0%,其等同于left top。
属性值为1个值时
另一个值为center
属性值为2个值时
- 若2个值都是关键字属性值。left关键字和right关键字表示水平方向,top关键字和bottom关键字表示垂直方向,不能包含对立的方位,left right和top bottom这样的语法是无效的。
- 若1个值是关键字属性值,另外一个值是数值或百分比值。如果数值或百分比值是第一个值,则表示水平方向,另外一个关键字属性值就表示垂直方向。如果数值或百分比值是第二个值,则表示垂直方向,另外一个关键字属性值就表示水平方向。因此属性值20px left是非法的,因为20px是数值且是第一个值,此时第二个值应该表示垂直方向,但是left显然是水平方向关键字属性值,出现了对立方位,所以为无效语法。
- 若2个值都是数值或百分比值。第一个值表示水平方向,第二个值表示垂直方向。因此20px 20%表示在距离默认定位原点(左上角)水平方向20px、垂直方向20%的位置开始定位。
属性值为3个值时
第1个值必须是方向关键字,如left 10px top 或 left top 15px ,其中的数值部分表示偏移量,无数值的即0px
属性值为4个值时
格式为:方向关键字 偏移量 方向关键字 偏移量 ,如 left 10px top 15px
背景尺寸 background-size
- 必须写在 background-image 后面
- 必须写在 background-position 后面
- 不能为负值
宽高都为auto的渲染规则
(1)如果图像水平和垂直方向同时具有内在尺寸,则按照图像原始大小进行渲染。
(2)如果图像没有内在尺寸,也没有内在比例,则按照背景定位区域的大小进行渲染,等同于设置属性值为100%。
(3)如果图像没有内在尺寸,但具有内在比例,则渲染效果等同于设置属性值为contain。
(4)如果图像只有一个方向有内在尺寸,但又具有内在比例,则图像会拉伸到该内在尺寸的大小,同时宽高比符合内在比例。
(5)如果图像只有一个方向有内在尺寸而没有内在比例,则图像有内在尺寸的一侧会拉伸到该内在尺寸大小,没有设置内在尺寸的一侧会拉伸到背景定位区域大小。
宽高仅一个为auto的渲染规则
(1)如果图像有内在比例,则图像会拉伸到指定的尺寸,高宽依然保持原始的比例。
(2)如果图像没有内在比例,则图像会拉伸到指定的尺寸。同时,如果图像有内在尺寸,则auto的计算尺寸就是图像的尺寸;如果图像没有内在尺寸,则auto的计算尺寸就是背景定位区域的尺寸。
背景原点 background-origin
用于改变背景图像定位的范围,也就是定位的原点,可以决定背景定位区域,默认值是padding-box。
背景裁剪 background-clip
用于控制背景的显示范围
- 范例:视觉上是18px×18px大小,实际点击区域是24px×24px大小的复选框
https://demo.cssworld.cn/new/3/10-6.php - 范例:兼容IE的渐变文字特效
https://demo.cssworld.cn/new/3/10-7.php