- background-position
- background-size
Background-position
1- 定义、属性&属性值
指的是背景图在元素中的位置
【语法】
属性名:
background-position
属性值:
(1) x y : x-水平偏移位置 y-垂直偏移位置
x 为正 ，向右移动
x 为负 ，向左移动
y 为正 ，向下移动
y 为负 ，向上移动
(2) x% y% : 相对于所在的元素的宽度和高度来设置 相对比例
多数用于背景图像居中显示
(3)left
right
center
top
bottom
2- 语法解释
举几组例子说明：
background-position:0 0；默认为所在元素左上角
background-position:-50px -100px;向左偏移50px，向上偏移100px
background-position:50% 50%;背景图向右偏移量为所在元素宽度的50%，向下偏移量为所在元素高度的50%
background-position:center center;背景图片位于所在元素的中心
background-position:left center;背景图片从左中处开始向右平铺
background-position:center top;背景图片从上中处开始向下平铺
Background-size
1- 定义、属性&属性值
设置背景图片的宽度和高度
【语法】
属性名:
background-size
属性值:
auto auto,为默认值
长度length和百分比percentage。
(1)value1 value2;
(2)value1% value2%;
(3)cover;
(4)contain;
2- 语法解释
1、value1 value2;
给定正的length值来调整背景图片大小。
第一个值为设置背景图宽度，第二个值为背景图的高度；
假如只给定一个值，那么第二个自动的为 'auto'；
ex:
background-size: auto;
background-size: 4em;
background-size: 100px;
background-size: 200px 100px;
background-size: auto 100px;
2、value1% value2%;
给定正的百分比来调整背景图片大小。
背景图大小是根据相对的背景区域来做调整，背景相对区域就是初始的包含块。
假如只给定一个值，那么第二个自动的为 'auto'；
ex:
background-size: 50%;
background-size: 50% 50%;
background-size: auto 50%;
background-size：100% 100%，背景图片铺满整个内容区
3、cover；
覆盖
按比例调整背景图片
所有的边都已经覆盖到元素的边缘时才停止缩放。
有可能图片显示不完整。
4、contain;
包含
按比例调整背景图片
只要有一条边覆盖到元素的边缘上就停止缩放。
图片一定会完整的显示在背景中，有可能不会覆盖到所有的区域。
