background太常用,太有用了 API
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
①背景颜色 ②图片url ③位置/大小 ④如何重复 ⑤定位区域 ⑥绘画区域 ⑦是否固定或者随着页面的其余部分滚动
|
属性名 |
属性值 |
||
|
1 |
background-color |
指定要使用的一个或多个背景图像 |
|
|
2 |
background-image |
||
|
3 |
background-position |
双属性值/单属性值 eft top left center left bottom right top right center right bottom center top center center center bottom x% y%
xpos ypos |
设置背景图像的起始位置。默认0% 0% 如果仅指定一个关键字，其他值将会是"center" 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％ 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions |
|
background-size |
100% 100% cover contain |
按容器比例撑满，图片变形 把背景图片放大到适合元素容器的尺寸，图片比例不变 |
|
|
4 |
background-repeat |
指定如何重复背景图像 |
|
|
5 |
background-origin |
padding-box border-box content-box |
指定background-position属性应该是相对位置，即指定背景图像的绘画区域， 默认值： padding-box，表示背景图片绘制区域是相对于填充框，即div模型中的padding 注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。 border-box：背景图像相对于border开始填充 content-box： 背景图相对于内容区域开始填充 |
|
background-clip |
padding-box border-box content-box |
1.border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉 2.padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉 3.context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉， 默认值： border-box |
|
|
background-attachment |
scroll fixed local |
设置背景图像是否固定或者随着页面的其余部分滚动。默认值scroll scroll背景图片随着页面的滚动而滚动，这是默认的 fix：背景图片不会随着页面的滚动而滚动。 local背景图片会随着元素内容的滚动而滚动。 |
|