背景样式background共计九个属性:
属性名 | 属性名含义 | 属性值 | 属性值含义 |
---|---|---|---|
background | 背景合写 | 依照下列顺序写 | |
background-color | 背景颜色 | #333|rgba(255,255,255,0.5)|red | 三种表示法都可以 |
background-position | 背景图开始的位置 | X轴:center|200px|50% Y轴:center|300px|50% | 三种表示方法都可以(若写一个值,则为X轴,Y轴方向为center) |
background-size | 背景图尺寸(默认为auto,若写一个为width,height默认为auto) | contain
cover auto 100px 200px 30% 30% | 包含:可能有空隙,图片完整
覆盖:没有空隙,可能图片不完整 自适应:原有比例 宽度像素值 高度像素值 宽度百分比 高度百分比 |
background-repeat | 重复平铺 | no-repeat| repeat-x| repeat-y| repeat | |
background-origin | 背景图相对于谁来定位 | border-box| padding-box|content-box | 当attachment属性值设置为fixed时,该属性没有效果 |
background-clip | 背景图的绘制位置 | border-box|padding-box|content-box | |
background-attachment | 如何固定背景图 | scroll
fixed | (scroll)默认值,背景图会随着页面的滚动而滚动
当页面其余部分滚动时,背景图不会滚动 |
background-image | 设置背景图片 | url(".././a.jpg")|none | 默认值为none,多重背景用逗号隔开 |
inherit |