写页面时，咱们常常用到 background ，那么关于它的深层属性，你知道多少呢？url
关于background 的基本经常使用属性无非就是spa
background-color:pink; <!-- 背景色 --> background-image:url(../1.png); <!-- 背景色 --> background-repeat:repeat/repeat-x/repeat-y/no-repeat; <!-- 平铺方式 -->
背景图的显示原则： 容器尺寸 = 图片尺寸 ————————— 恰好显示 容器尺寸 > 图片尺寸 ————————— 默认平铺，自动铺满 容器尺寸 < 图片尺寸 ————————— 只显示容器内部分
那么除此以外，咱们偶尔须要用到background的其它一些属性，好比：code
一、图片大小超出容器，咱们须要对图片显示范围进行肯定：blog
background-clip : <!-- 指示背景的显示范围，即裁剪位置 -->
border-box; <!-- 从容器边框裁剪 -->
padding-box; <!-- 从容器内边距进行裁剪 -->
content-box; <!-- 从容器内容裁剪 -->
二、对背景图像开始出现的位置（起点）指定：继承
background-origin：
border-box; <!-- 背景图像相对于边框盒来定位。 -->
padding-box; <!-- 背景图像相对于内边距框来定位。 -->
content-box; <!-- 背景图像相对于内容框来定位。 -->
三、指定背景图的尺寸：图片
background-size：auto / 长度值 / 百分比 / cover (背景图像彻底覆盖背景区域,某些部分也许没法显示) / contain (扩展至最大尺寸，以使其宽度和高度彻底适应内容区域)
四、图像定位：ip
background-position：值一 值二 ；
值一表示水平位置，可取 left / center / right ; 也可取为百分比或数值。
值二表示竖直位置，可取 top / mid / bottom ; 也可取为百分比或数值。
五、背景图像是否固定或者随着页面的其他部分滚动：it
background-attachment：
scroll； <!-- 背景图片随页面的其他部分滚动 -->
fixed； <!-- 背景图像固定 -->
inherit； <!-- 继承父元素属性值 -->