background 你了解吗

写页面时，我们经常用到 background ，那么关于它的深层属性，你知道多少呢？

关于background 的基本常用属性无非就是

background-color:pink;              <!-- 背景色 -->
background-image:url(../1.png);    <!-- 背景色 -->
background-repeat:repeat/repeat-x/repeat-y/no-repeat; <!-- 平铺方式 -->


背景图的显示原则：
　　　　　　　　容器尺寸 = 图片尺寸 ————————— 刚好显示
　　　　　　　　容器尺寸 > 图片尺寸 ————————— 默认平铺，自动铺满
　　　　　　　　容器尺寸 < 图片尺寸 ————————— 只显示容器内部分

 

　　那么除此之外，我们偶尔需要用到background的其它一些属性，比如：

1、图片大小超出容器，我们需要对图片显示范围进行确定：

background-clip :              <!-- 指示背景的显示范围，即裁剪位置 -->

　　　　　　　　　　border-box;　　　　　　<!-- 从容器边框裁剪 -->

　　　　　　　　　　padding-box;　　　　　　<!-- 从容器内边距进行裁剪 -->

　　　　　　　　　　content-box;　　　　　　<!-- 从容器内容裁剪 -->

2、对背景图像开始出现的位置（起点）指定：

background-origin：

　　　　　　　　　　border-box;　　　　　　<!-- 背景图像相对于边框盒来定位。 -->

　　　　　　　　　　padding-box;　　　　　　<!-- 背景图像相对于内边距框来定位。 -->

　　　　　　　　　　content-box;　　　　　　<!-- 背景图像相对于内容框来定位。 -->

3、指定背景图的尺寸：

background-size：auto / 长度值  / 百分比  /  cover (背景图像完全覆盖背景区域,某些部分也许无法显示) /  contain (扩展至最大尺寸，以使其宽度和高度完全适应内容区域)

4、图像定位：

background-position：值一   值二 ；

值一表示水平位置，可取 left / center / right ; 也可取为百分比或数值。

值二表示竖直位置，可取 top / mid / bottom ; 也可取为百分比或数值。

5、背景图像是否固定或者随着页面的其余部分滚动：

background-attachment：
　　　　　　　　　　　　　　scroll； 　　　　<!-- 背景图片随页面的其余部分滚动 -->

　　　　　　　　　　　　　　fixed；　　　　　　<!-- 背景图像固定  -->

　　　　　　　　　　　　　　inherit；　　　　<!-- 继承父元素属性值 -->